日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
如何用vue實(shí)現(xiàn)模態(tài)框組件

基本上每個(gè)項(xiàng)目都需要用到模態(tài)框組件，由于在最近的項(xiàng)目中，alert組件和confirm是兩套完全不一樣的設(shè)計(jì)，所以我將他們分成了兩個(gè)組件，本文主要討論的是confirm組件的實(shí)現(xiàn)。

創(chuàng)新互聯(lián)專注于大田企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè),商城網(wǎng)站定制開發(fā)。大田網(wǎng)站建設(shè)公司,為大田等地區(qū)提供建站服務(wù)。全流程按需搭建網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

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

 
 
    
  
  
  1.    
    2.

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

樣式 

 
 
    
  
  
  1. .modal { 
    2. 
  
  
  2.     position: fixed; 
    3. 
  
  
  3.     left: 0; 
    4. 
  
  
  4.     top: 0; 
    5. 
  
  
  5.     right: 0; 
    6. 
  
  
  6.     bottom: 0; 
    7. 
  
  
  7.     z-index: 1001; 
    8. 
  
  
  8.     -webkit-overflow-scrolling: touch; 
    9. 
  
  
  9.     outline: 0; 
    10. 
  
  
  10.     overflow: scroll; 
    11. 
  
  
  11.     margin: 30/@rate auto; 
    12. 
  
  
  12. } 
    13. 
  
  
  13. .modal-dialog { 
    14. 
  
  
  14.     position: absolute; 
    15. 
  
  
  15.     left: 50%; 
    16. 
  
  
  16.     top: 0; 
    17. 
  
  
  17.     transform: translate(-50%,0); 
    18. 
  
  
  18.     width: 690/@rate; 
    19. 
  
  
  19.     padding: 50/@rate 40/@rate; 
    20. 
  
  
  20.     background: #fff; 
    21. 
  
  
  21. } 
    22. 
  
  
  22. .modal-backup { 
    23. 
  
  
  23.     position: fixed; 
    24. 
  
  
  24.     top: 0; 
    25. 
  
  
  25.     right: 0; 
    26. 
  
  
  26.     bottom: 0; 
    27. 
  
  
  27.     left: 0; 
    28. 
  
  
  28.     z-index: 1000; 
    29. 
  
  
  29.     background: rgba(0, 0, 0, 0.5); 
    30. 
  
  
  30. }  
    31.

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

接口定義 

 
 
    
  
  
  1. /** 
    2. 
  
  
  2.  * modal 模態(tài)接口參數(shù) 
    3. 
  
  
  3.  * @param {string} modal.title 模態(tài)框標(biāo)題 
    4. 
  
  
  4.  * @param {string} modal.text 模態(tài)框內(nèi)容 
    5. 
  
  
  5.  * @param {boolean} modal.showCancelButton 是否顯示取消按鈕 
    6. 
  
  
  6.  * @param {string} modal.cancelButtonClass 取消按鈕樣式 
    7. 
  
  
  7.  * @param {string} modal.cancelButtonText 取消按鈕文字 
    8. 
  
  
  8.  * @param {string} modal.showConfirmButton 是否顯示確定按鈕 
    9. 
  
  
  9.  * @param {string} modal.confirmButtonClass 確定按鈕樣式 
    10. 
  
  
  10.  * @param {string} modal.confirmButtonText 確定按鈕標(biāo)文字 
    11. 
  
  
  11.  */ 
    12. 
  
  
  12. props: ['modalOptions'], 
    13. 
  
  
  13. computed: { 
    14. 
  
  
  14.     /** 
    15. 
  
  
  15.      * 格式化props進(jìn)來的參數(shù),對參數(shù)賦予默認(rèn)值 
    16. 
  
  
  16.      */ 
    17. 
  
  
  17.     modal: { 
    18. 
  
  
  18.         get() { 
    19. 
  
  
  19.             let modal = this.modalOptions; 
    20. 
  
  
  20.             modal = { 
    21. 
  
  
  21.                 title: modal.title || '提示', 
    22. 
  
  
  22.                 text: modal.text, 
    23. 
  
  
  23.                 showCancelButton: typeof modal.showCancelButton === 'undefined' ? true : modal.showCancelButton, 
    24. 
  
  
  24.                 cancelButtonClass: modal.cancelButtonClass ? modal.showCancelButton : 'btn-default', 
    25. 
  
  
  25.                 cancelButtonText: modal.cancelButtonText ? modal.cancelButtonText : '取消', 
    26. 
  
  
  26.                 showConfirmButton: typeof modal.showConfirmButton === 'undefined' ? true : modal.cancelButtonClass, 
    27. 
  
  
  27.                 confirmButtonClass: modal.confirmButtonClass ? modal.confirmButtonClass : 'btn-active', 
    28. 
  
  
  28.                 confirmButtonText: modal.confirmButtonText ? modal.confirmButtonText : '確定', 
    29. 
  
  
  29.             }; 
    30. 
  
  
  30.             return modal; 
    31. 
  
  
  31.         }, 
    32. 
  
  
  32.     }, 
    33. 
  
  
  33. },  
    34.

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

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

 
 
    
  
  
  1. data() { 
    2. 
  
  
  2.     return { 
    3. 
  
  
  3.         show: false,   // 是否顯示模態(tài)框 
    4. 
  
  
  4.         resolve: '', 
    5. 
  
  
  5.         reject: '', 
    6. 
  
  
  6.         promise: '',  // 保存promise對象 
    7. 
  
  
  7.     }; 
    8. 
  
  
  8. }, 
    9. 
  
  
  9. methods: { 
    10. 
  
  
  10.     /** 
    11. 
  
  
  11.      * 確定,將promise斷定為完成態(tài) 
    12. 
  
  
  12.      */ 
    13. 
  
  
  13.     submit() { 
    14. 
  
  
  14.         this.resolve('submit'); 
    15. 
  
  
  15.     }, 
    16. 
  
  
  16.     /** 
    17. 
  
  
  17.      * 關(guān)閉,將promise斷定為reject狀態(tài) 
    18. 
  
  
  18.      * @param type {number} 關(guān)閉的方式 0表示關(guān)閉按鈕關(guān)閉,1表示取消按鈕關(guān)閉 
    19. 
  
  
  19.      */ 
    20. 
  
  
  20.     close(type) { 
    21. 
  
  
  21.         this.show = false; 
    22. 
  
  
  22.         this.reject(type); 
    23. 
  
  
  23.     }, 
    24. 
  
  
  24.     /** 
    25. 
  
  
  25.      * 顯示confirm彈出,并創(chuàng)建promise對象 
    26. 
  
  
  26.      * @returns {Promise} 
    27. 
  
  
  27.      */ 
    28. 
  
  
  28.     confirm() { 
    29. 
  
  
  29.         this.show = true; 
    30. 
  
  
  30.         this.promise = new Promise((resolve, reject) => { 
    31. 
  
  
  31.             this.resolve = resolve; 
    32. 
  
  
  32.             this.reject = reject; 
    33. 
  
  
  33.         }); 
    34. 
  
  
  34.         return this.promise;   //返回promise對象,給父級組件調(diào)用 
    35. 
  
  
  35.     }, 
    36. 
  
  
  36. },  
    37.

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

調(diào)用 

 
 
    
  
  
  1.  
    2. 
  
  
  2.  
    3. 
  
  
  3.  
    4. 
  
  
  4. this.$refs.dialog.confirm().then(() => { 
    5. 
  
  
  5.     // 點(diǎn)擊確定按鈕的回調(diào)處理 
    6. 
  
  
  6.     callback(); 
    7. 
  
  
  7.     this.$refs.dialog.show = false;  
    8. 
  
  
  8. }).catch(() => { 
    9. 
  
  
  9.     // 點(diǎn)擊取消按鈕的回調(diào)處理 
    10. 
  
  
  10.     callback(); 
    11. 
  
  
  11. });  
    12.

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

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

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

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

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

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

 
 
    
  
  
  1. events: { 
    2. 
  
  
  2.     /** 
    3. 
  
  
  3.      * 轉(zhuǎn)發(fā)事件 
    4. 
  
  
  4.      * @param  {string} eventName 事件名稱 
    5. 
  
  
  5.      * @param  {object} arg       事件參數(shù) 
    6. 
  
  
  6.      * @return {null} 
    7. 
  
  
  7.      */ 
    8. 
  
  
  8.     'transmit': function (eventName, arg) { 
    9. 
  
  
  9.         this.$broadcast(eventName, arg); 
    10. 
  
  
  10.     } 
    11. 
  
  
  11. },  
    12.

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

 
 
    
  
  
  1. // 接收事件，獲得需要取消和確定按鈕的事件名 
    2. 
  
  
  2. events: { 
    3. 
  
  
  3.     'tip': function(obj) { 
    4. 
  
  
  4.         this.events = { 
    5. 
  
  
  5.             cancel: obj.events.cancel, 
    6. 
  
  
  6.             confirm: obj.events.confirm 
    7. 
  
  
  7.         } 
    8. 
  
  
  8.     } 
    9. 
  
  
  9. } 
    10. 
  
  
  10. // 取消按鈕 
    11. 
  
  
  11. cancel：function() { 
    12. 
  
  
  12.     this.$dispatch('transmit',this.events.cancel); 
    13. 
  
  
  13. } 
    14. 
  
  
  14. // 確定按鈕 
    15. 
  
  
  15. submit: function() { 
    16. 
  
  
  16.     this.$dispatch('transmit',this.events.submit); 
    17. 
  
  
  17. }  
    18.

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

 
 
    
  
  
  1. this.$dispatch('transmit','tip',{ 
    2. 
  
  
  2.     events: { 
    3. 
  
  
  3.         confirm: 'confirmEvent' 
    4. 
  
  
  4.     } 
    5. 
  
  
  5. }); 
    6. 
  
  
  6. this.$once('confirmEvent',function() { 
    7. 
  
  
  7.     callback(); 
    8. 
  
  
  8. }  
    9.

先是傳遞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)擊取消和確定按鈕的時(shí)候分別emit一個(gè)事件，直接在組件上監(jiān)聽這個(gè)事件，這種做法的好處是事件比較容易追蹤。 

 
 
    
  
  
  1. // 確定按鈕 
    2. 
  
  
  2. ok () { 
    3. 
  
  
  3.     this.$emit('ok'); 
    4. 
  
  
  4.     if (this.closeWhenOK) { 
    5. 
  
  
  5.         this.show = false; 
    6. 
  
  
  6.     } 
    7. 
  
  
  7. }, 
    8. 
  
  
  8. // 取消按鈕 
    9. 
  
  
  9. cancel () { 
    10. 
  
  
  10.     this.$emit('cancel'); 
    11. 
  
  
  11.     this.show = false; 
    12. 
  
  
  12. },  
    13.

調(diào)用：

 
 
    
  
  
  1.  
    2. 
  
  
  2.     Modal Text 
    3. 
  
  
  3.   
    4.

但是我們在使用的時(shí)候經(jīng)常會(huì)遇到這樣的場景，在一個(gè)組件的內(nèi)部，經(jīng)常會(huì)用到多個(gè)對話框，對話框可能只是文字有點(diǎn)區(qū)別，回調(diào)不同，這時(shí)就需要在template中為每個(gè)對話框都寫一次，有點(diǎn)麻煩。不想每次寫，可以用v-for來遍歷，這篇文章關(guān)于 vue 彈窗組件的一些感想有我與作者的討論，可以參考一下。

參考資料

  • vue.js dynamic create nest modal
  • es6 Promise對象
  • vue-bootstrap-modal
  • 關(guān)于 vue 彈窗組件的一些感想

網(wǎng)頁題目：如何用vue實(shí)現(xiàn)模態(tài)框組件
文章網(wǎng)址：http://m.5511xx.com/article/cosjics.html