<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        如何使用v-model與promise兩種方式實現(xiàn)vue彈窗組件

        來源:懂視網 責編:小采 時間:2020-11-27 19:44:56
        文檔

        如何使用v-model與promise兩種方式實現(xiàn)vue彈窗組件

        如何使用v-model與promise兩種方式實現(xiàn)vue彈窗組件:這次給大家?guī)砣绾问褂胿-model與promise兩種方式實現(xiàn)vue彈窗組件,使用v-model與promise兩種方式實現(xiàn)vue彈窗組件的注意事項有哪些,下面就是實戰(zhàn)案例,一起來看一下。最近公司有一個后臺業(yè)務雖然也是寫在了現(xiàn)有的后臺系統(tǒng)中,但是之后要為這個業(yè)務單獨拉出來
        推薦度:
        導讀如何使用v-model與promise兩種方式實現(xiàn)vue彈窗組件:這次給大家?guī)砣绾问褂胿-model與promise兩種方式實現(xiàn)vue彈窗組件,使用v-model與promise兩種方式實現(xiàn)vue彈窗組件的注意事項有哪些,下面就是實戰(zhàn)案例,一起來看一下。最近公司有一個后臺業(yè)務雖然也是寫在了現(xiàn)有的后臺系統(tǒng)中,但是之后要為這個業(yè)務單獨拉出來

        這次給大家?guī)砣绾问褂胿-model與promise兩種方式實現(xiàn)vue彈窗組件,使用v-model與promise兩種方式實現(xiàn)vue彈窗組件的注意事項有哪些,下面就是實戰(zhàn)案例,一起來看一下。

        最近公司有一個后臺業(yè)務雖然也是寫在了現(xiàn)有的后臺系統(tǒng)中,但是之后要為這個業(yè)務單獨拉出來新建一個后臺系統(tǒng),所以現(xiàn)有的后臺系統(tǒng)中的vue組件庫,就不能用了(因為不知道將來的系統(tǒng)要基于什么組件庫,以防給未來移植項目帶來麻煩),這次業(yè)務中又遇到了彈窗的功能,所以只能手動寫一個了(雖然說彈窗組件很簡單,也是想自己總結一下,有不對的地方也請指出),一開始用傳統(tǒng)的props,$emit但是覺得要接兩個取消與確認的回調這塊的邏輯分散了所以就用了promise兩個回調的方式把兩個回調寫在了一起,并不一定好,算是提供一種思路吧。

        一.概覽

        先看最后的調用方式

        props $emit方式

        <chat-modal ref="chat-modal" v-model="showModal" cancelText="取消" sureText="確認" title="彈窗標題" small @on-ok="onOK" @on-cancel="onCancel">
         <p>slot的東西,想向彈窗中添加自定義的內容</p>
        </chat-modal>
        methods: {
         display() {
         this.showModal = true;//交互點擊手動觸發(fā)顯示彈窗 
         },
         onOK() {},//點擊確認的回調
         onCancel() {}//點擊取消的回調
        }

        promise的回調方式

        <chat-modal ref="chat-modal"></chat-modal>
        methods: {
         display() {
         this.$refs["chat-modal"].openModal({
         title: "彈窗標題",
         sureText: "確認",
         cancelText: "取消"
         }).then(res => {
         //點擊確認的回調
         }, res => {
         //點擊取消的回調
         })
         }
        }

        第二種方式的好處就是把所有的邏輯都集中到了一個方法里。

        二.看下組件的源碼

        tip: 樣式有些爛...

        <template>
         <p>
         <p class="shadow" v-show="showModal"></p>
         <p class="modal" :class="{'smSize': otherText.small || small}" v-show="showModal">
         <p class="header">{{ otherText.title || title}}</p>
         <p class="body">
         <slot></slot>
         </p>
         <p class="footer">
         <p class="item success" id="sure" ref="sure" @click="makeSure" v-show="otherText.sureText || sureText">{{ otherText.sureText || sureText }}</p>
         <p class="item red" id="cancel" ref="cancel" @click="makeCancel" v-show="otherText.cancelText || cancelText">{{ otherText.cancelText || cancelText }}</p>
         </p>
         </p>
         </p>
        </template>
        <script>
        //此組件提供兩種調用方法,可以在組件上v-model一個表示是否顯示彈窗的對話框,然后需要的一些值通過props傳入,然后$emit在組件上@監(jiān)聽做回調
        //第二中方法所有的傳值回調都只需要在組件內部的一個方法調用然后在組件外部this.$refs[xxx].open調用然后.then觸發(fā)回調,比上一種方便些
        var initOtherText = {
         sureText: "",
         cancelText: "",
         title: "",
         small: false
        };
        export default {
         props: {
         title: {
         type: String
         },
         sureText: {
         type: String
         },
         cancelText: {
         type: String
         },
         value: {
         type: Boolean
         },
         small: {
         type: Boolean
         }
         },
         watch: {
         value(newVal) {
         this.showModal = newVal;
         }
         },
         data() {
         return {
         otherText: JSON.parse(JSON.stringify(initOtherText)),
         showModal: this.value
         };
         },
         methods: {
         makeSure() {
         this.$emit("on-ok");
         this.$emit("input", false);
         },
         makeCancel() {
         this.$emit("on-cancel");
         this.$emit("input", false);
         },
         openModal(otherText) {
         this.otherText = { ...otherText };
         this.showModal = true;
         var pms = new Promise((resolve, reject) => {
         this.$refs["sure"].addEventListener("click", () => {
         this.showModal = false;
         resolve("點擊了確定");
         });
         this.$refs["cancel"].addEventListener("click", () => {
         this.showModal = false;
         reject("點擊了取消");
         });
         });
         return pms;
         }
         }
        };
        </script>
        <style lang="scss" scoped>
        .shadow {
         background-color: rgba(0, 0, 0, 0.5);
         display: table;
         height: 100%;
         left: 0;
         position: fixed;
         top: 0;
         transition: opacity 0.3s ease;
         width: 100%;
         z-index: 50;
        }
        .modal {
         display: table-cell;
         vertical-align: middle;
         overflow-x: hidden;
         position: fixed;
         background-color: white;
         box-shadow: rgba(0, 0, 0, 0.33) 0px 2px 8px;
         border-radius: 5px;
         outline: 0px;
         overflow: hidden;
         transition: all 0.3s ease;
         width: 600px;
         height: 400px;
         top: 50%;
         left: 50%;
         margin-top: -200px;
         margin-left: -300px;
        }
        .header {
         align-items: center;
         background-color: #62a39e;
         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
         color: #fff;
         font-weight: bold;
         display: -ms-flexbox;
         display: flex;
         height: 3.5rem;
         padding: 0 1.5rem;
         position: relative;
         z-index: 1;
        }
        .body {
         align-items: center;
         padding: 1.5rem;
        }
        .footer {
         justify-content: flex-end;
         padding: 1.5rem;
         position: absolute;
         bottom: 0;
         width: 100%;
         float: right;
        }
        .item {
         color: white;
         text-align: center;
         border-radius: 5px;
         padding: 10px;
         cursor: pointer;
         display: inline-block;
        }
        .info {
         background-color: #2196f3;
        }
        .success {
         background-color: #62a39e;
        }
        .red {
         background-color: #e95358;
        }
        .smSize {
         height: 200px;
        }
        </style>

        首先分析一下第一種方式: 調用者需要在組件外部v-model上綁定一個變量(例中為showModal)來指示彈窗是否顯示,顯示的時候需要在組件外部手動設置 this.showModal = true ,組件內部props定義一個屬性來接這個值為 value: {type: Boolean} ,同時在組件內部在用聲明一個變量用來同步外部傳進來的props值 默認值為 showModal: this.value (內部聲明的值也叫了showModal),在watch中監(jiān)聽進行同步 watch: { value(newVal) { this.showModal = newVal } } ;然后把組件內部的這個showModal值綁定在需要顯示或者隱藏的DOM元素上。向外拋出事件的時候是在點擊組件內部的確定與關閉按鈕時候

        makeSure() {
         this.$emit("on-ok");
         this.$emit("input", false);
         },
        makeCancel() {
         this.$emit("on-cancel");
         this.$emit("input", false);
         }

        this.$emit("on-ok");this.$emit("on-cancel"); 這兩句的是向外拋出事件在組件外部@接一下然后寫自己需要的回調函數(shù)。這時就可以實現(xiàn)彈窗的顯示與隱藏了,你可能發(fā)現(xiàn)并沒有一句代碼去設置this.showModal = false;彈窗就隱藏了。主要是因為這幾句代碼 v-model = 'showModal' 和 組件內部的 props: {value: {type: Boolean}} this.$emit("input", false) 。v-model其實是vue的語法糖, <chat-modal v-model="showModal"> 其實可以寫為 <chat-modal :value="showModal" @input="showModal = arguments[0]"> 所以要求我們在組件內部必須規(guī)定props的名字必須為value, 然后在組件內部觸發(fā)確定或者取消的時候在組件內部觸發(fā) this.$emit("input", false) 這樣實現(xiàn)了直接隱藏彈窗而不必打擾用戶讓用戶在組件外部在手動將showModal置為false.

        然后來看promise的方式: 第一種方式傳進來的值都通過props來接的,這種方式通過在組件內部定義了另一個對象來接傳進來的值,

        var initOtherText = {
         sureText: "",
         cancelText: "",
         title: "",
         small: false
        };
        otherText: JSON.parse(JSON.stringify(initOtherText)),

        然后在menthods里定義了一個名為openModal的方法,然后把傳進來的一系列參數(shù)賦值給組件內部的對象 this.otherText = { ...otherText }; this.showModal = true; 并且將showModal置為true,然后每次觸發(fā)的時候新建一個promise對象,里面的異步事件為點擊確定和取消的兩個點擊事件,這里要操作DOM了

        this.$refs["sure"].addEventListener("click", () => {
         this.showModal = false;
         resolve("點擊了確定");
        });

        獲取確定按鈕的DOM元素綁定點擊事件,回調里將showModal置為false并且resolve,

        this.$refs["cancel"].addEventListener("click", () => {
         this.showModal = false;
         reject("點擊了取消");
        });

        獲取取消按鈕的DOM綁定點擊事件,回調里reject.

        遇到的坑

        這之前遇到了一個坑,因為第一次已經綁定了點擊事件,第二次resolve和reject就會失敗,本想取消一下綁定事件,但是因為將整個彈窗v-show="showModal"的原因整個DOM被display:none;了就不需要手動解綁了。 第二個是關于用v-if還是v-show來隱藏彈窗,一開始用的是v-if但是發(fā)現(xiàn)在這步時

        this.showModal = true;
        var pms = new Promise((resolve, reject) => {
         this.$refs["sure"].addEventListener.xxx//省略
        });
        return pms;

        將showModal置為true時然后就去綁定事件這時候還沒有DOM還沒有解析玩DOM樹上還沒有,要不就得用this.$nextTick增加了復雜度,最后采用了v-show;

        關于優(yōu)先級問題

        如果既在組件上用prop傳了值(title,sureText之類的)如 <chat-modal" title="xx" sureText="xxx"></chat-modal> 也在方法里傳了

        this.$refs["chat-modal"].openModal({
         title: "服務小結",
         sureText: "提交并結束",
         cancelText: "取消"
         }).then();

        相信看了本文案例你已經掌握了方法,更多精彩請關注Gxl網其它相關文章!

        推薦閱讀:

        如何使用Vue內父子組件通訊todolist組件

        如何使用Vue整合AdminLTE模板

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        如何使用v-model與promise兩種方式實現(xiàn)vue彈窗組件

        如何使用v-model與promise兩種方式實現(xiàn)vue彈窗組件:這次給大家?guī)砣绾问褂胿-model與promise兩種方式實現(xiàn)vue彈窗組件,使用v-model與promise兩種方式實現(xiàn)vue彈窗組件的注意事項有哪些,下面就是實戰(zhàn)案例,一起來看一下。最近公司有一個后臺業(yè)務雖然也是寫在了現(xiàn)有的后臺系統(tǒng)中,但是之后要為這個業(yè)務單獨拉出來
        推薦度:
        標簽: 方法 VUE 組件
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 亚洲首页国产精品丝袜| 亚洲无码在线播放| 色老板亚洲视频免在线观| 91精品国产免费久久国语蜜臀 | 拍拍拍无挡视频免费观看1000| 亚洲精品一级无码中文字幕| 一级做a爰片性色毛片免费网站 | 亚洲午夜久久久久久久久久| 成人免费一区二区三区| 亚洲日韩中文无码久久| 永久免费av无码入口国语片| 亚洲国产精品乱码一区二区| 久久久久成人片免费观看蜜芽| 久久精品国产亚洲AV麻豆不卡 | 亚洲国产日韩在线观频| 黄色大片免费网站| 亚洲欧洲一区二区三区| 中文字幕乱理片免费完整的| 日韩亚洲人成在线综合日本| 222www在线观看免费| 亚洲色图激情文学| 四虎国产精品免费久久影院| 国产免费人成视频在线播放播| 亚洲αv在线精品糸列| 免费在线观看h片| 亚洲AV无码AV吞精久久| 国产亚洲精品无码拍拍拍色欲| 99re免费在线视频| 亚洲女子高潮不断爆白浆| 亚洲国产综合精品中文字幕| 免费A级毛片无码A∨中文字幕下载| 久久精品国产99国产精品亚洲| 免费无遮挡无码永久在线观看视频| GOGOGO免费观看国语| 亚洲日本香蕉视频观看视频| 日本不卡在线观看免费v| 成人免费ā片在线观看| 亚洲视频一区二区三区四区| 亚洲精品456播放| 91精品国产免费久久久久久青草| 国产精品亚洲一区二区在线观看|