這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)vue中怎么實(shí)現(xiàn)一個模態(tài)框組件，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

十年的威信網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。成都營銷網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整威信建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“威信網(wǎng)站設(shè)計”,“威信網(wǎng)站推廣”以來，每個客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

組件結(jié)構(gòu)

模態(tài)框結(jié)構(gòu)分為三部分，分別為頭部、內(nèi)部區(qū)域和操作區(qū)域，都提供了slot，可以根據(jù)需要定制。

樣式

.modal {     position: fixed;     left: 0;     top: 0;     right: 0;     bottom: 0;     z-index: 1001;     -webkit-overflow-scrolling: touch;     outline: 0;     overflow: scroll;     margin: 30/@rate auto; } .modal-dialog {     position: absolute;     left: 50%;     top: 0;     transform: translate(-50%,0);     width: 690/@rate;     padding: 50/@rate 40/@rate;     background: #fff; } .modal-backup {     position: fixed;     top: 0;     right: 0;     bottom: 0;     left: 0;     z-index: 1000;     background: rgba(0, 0, 0, 0.5); }

這里只是一些基本樣式，沒什么好說的，這次項(xiàng)目是在移動端，用了淘寶的自適應(yīng)布局方案，@rate是切稿時候的轉(zhuǎn)換率。

接口定義

/**  * modal 模態(tài)接口參數(shù)  * @param {string} modal.title 模態(tài)框標(biāo)題  * @param {string} modal.text 模態(tài)框內(nèi)容  * @param {boolean} modal.showCancelButton 是否顯示取消按鈕  * @param {string} modal.cancelButtonClass 取消按鈕樣式  * @param {string} modal.cancelButtonText 取消按鈕文字  * @param {string} modal.showConfirmButton 是否顯示確定按鈕  * @param {string} modal.confirmButtonClass 確定按鈕樣式  * @param {string} modal.confirmButtonText 確定按鈕標(biāo)文字  */ props: ['modalOptions'], computed: {     /**      * 格式化props進(jìn)來的參數(shù),對參數(shù)賦予默認(rèn)值      */     modal: {         get() {             let modal = this.modalOptions;             modal = {                 title: modal.title || '提示',                 text: modal.text,                 showCancelButton: typeof modal.showCancelButton === 'undefined' ? true : modal.showCancelButton,                 cancelButtonClass: modal.cancelButtonClass ? modal.showCancelButton : 'btn-default',                 cancelButtonText: modal.cancelButtonText ? modal.cancelButtonText : '取消',                 showConfirmButton: typeof modal.showConfirmButton === 'undefined' ? true : modal.cancelButtonClass,                 confirmButtonClass: modal.confirmButtonClass ? modal.confirmButtonClass : 'btn-active',                 confirmButtonText: modal.confirmButtonText ? modal.confirmButtonText : '確定',             };             return modal;         },     }, },

這里定義了接口的參數(shù)，可以自定義標(biāo)題、內(nèi)容、是否顯示按鈕和按鈕的樣式，用一個computed來做參數(shù)默認(rèn)值的控制。

模態(tài)框內(nèi)部方法

data() {     return {         show: false,   // 是否顯示模態(tài)框         resolve: '',         reject: '',         promise: '',  // 保存promise對象     }; }, methods: {     /**      * 確定,將promise斷定為完成態(tài)      */     submit() {         this.resolve('submit');     },     /**      * 關(guān)閉,將promise斷定為reject狀態(tài)      * @param type {number} 關(guān)閉的方式 0表示關(guān)閉按鈕關(guān)閉,1表示取消按鈕關(guān)閉      */     close(type) {         this.show = false;         this.reject(type);     },     /**      * 顯示confirm彈出,并創(chuàng)建promise對象      * @returns {Promise}      */     confirm() {         this.show = true;         this.promise = new Promise((resolve, reject) => {             this.resolve = resolve;             this.reject = reject;         });         return this.promise;   //返回promise對象,給父級組件調(diào)用     }, },

在模態(tài)框內(nèi)部定義了三個方法，最核心部分confirm方法，這是一個定義在模態(tài)框內(nèi)部，但是是給使用模態(tài)框的父級組件調(diào)用的方法，該方法返回的是一個promise對象，并將resolve和reject存放于modal組件的data中，點(diǎn)擊取消按鈕時，斷定為reject狀態(tài)，并將模態(tài)框關(guān)閉掉，點(diǎn)確定按鈕時，斷定為resolve狀態(tài)，模態(tài)框沒有關(guān)閉，由調(diào)用modal組件的父級組件的回調(diào)處理完成后手動控制關(guān)閉模態(tài)框。

調(diào)用

   this.$refs.dialog.confirm().then(() => {     // 點(diǎn)擊確定按鈕的回調(diào)處理     callback();     this.$refs.dialog.show = false;  }).catch(() => {     // 點(diǎn)擊取消按鈕的回調(diào)處理     callback(); });

用v-ref創(chuàng)建一個索引,就很方便拿到模態(tài)框組件內(nèi)部的方法了。這樣一個模態(tài)框組件就完成了。

其他實(shí)現(xiàn)方法

在模態(tài)框組件中，比較難實(shí)現(xiàn)的應(yīng)該是點(diǎn)擊確定和取消按鈕時，父級的回調(diào)處理，我在做這個組件時，也參考了一些其實(shí)實(shí)現(xiàn)方案。

使用事件轉(zhuǎn)發(fā)

這個方法是我的同事實(shí)現(xiàn)的，用在上一個項(xiàng)目，采用的是$dispatch和$broadcast來派發(fā)或廣播事件。

首先在根組件接收dispatch過來的transmit事件，再將transmit事件傳遞過來的eventName廣播下去

events: {     /**      * 轉(zhuǎn)發(fā)事件      * @param  {string} eventName 事件名稱      * @param  {object} arg       事件參數(shù)      * @return {null}      */     'transmit': function (eventName, arg) {         this.$broadcast(eventName, arg);     } },

其次是模態(tài)框組件內(nèi)部接收從父級組件傳遞過來的確定和取消按鈕所觸發(fā)的事件名，點(diǎn)擊取消和確定按鈕的時候觸發(fā)

// 接收事件，獲得需要取消和確定按鈕的事件名 events: {     'tip': function(obj) {         this.events = {             cancel: obj.events.cancel,             confirm: obj.events.confirm         }     } } // 取消按鈕 cancel：function() {     this.$dispatch('transmit',this.events.cancel); } // 確定按鈕 submit: function() {     this.$dispatch('transmit',this.events.submit); }

在父級組件中調(diào)用模態(tài)框如下：

this.$dispatch('transmit','tip',{     events: {         confirm: 'confirmEvent'     } }); this.$once('confirmEvent',function() {     callback(); }

先是傳遞tip事件，將事件名傳遞給模態(tài)框，再用$once監(jiān)聽確定或取消按鈕所觸發(fā)的事件，事件觸發(fā)后進(jìn)行回調(diào)。

這種方法看起來是不是很暈?所以vue  2.0取消了$dispatch和$broadcast，我們在最近的項(xiàng)目中雖然還在用1.0，但是也不再用$dispatch和$broadcast，方便以后的升級。

使用emit來觸發(fā)

這種方法來自vue-bootstrap-modal,點(diǎn)擊取消和確定按鈕的時候分別emit一個事件，直接在組件上監(jiān)聽這個事件，這種做法的好處是事件比較容易追蹤。

// 確定按鈕 ok () {     this.$emit('ok');     if (this.closeWhenOK) {         this.show = false;     } }, // 取消按鈕 cancel () {     this.$emit('cancel');     this.show = false; },

調(diào)用：

     Modal Text 

上述就是小編為大家分享的vue中怎么實(shí)現(xiàn)一個模態(tài)框組件了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。