欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

利用vue實(shí)現(xiàn)模態(tài)框組件

 更新時(shí)間:2016年12月19日 09:32:47   作者:對(duì)角另一面  
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)模態(tài)框組件的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

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

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

<template>
 <div class="modal" v-show="show" transition="fade">
  <div class="modal-dialog">
   <div class="modal-content">
    <!--頭部-->
    <div class="modal-header">
     <slot name="header">
      <p class="title">{{modal.title}}</p>
     </slot>
     <a v-touch:tap="close(0)" class="close" href="javascript:void(0)"></a>
    </div>
    <!--內(nèi)容區(qū)域-->
    <div class="modal-body">
     <slot name="body">
      <p class="notice">{{modal.text}}</p>
     </slot>
    </div>
    <!--尾部,操作按鈕-->
    <div class="modal-footer">
     <slot name="button">
      <a v-if="modal.showCancelButton" href="javascript:void(0)" class="button {{modal.cancelButtonClass}}" v-touch:tap="close(1)">{{modal.cancelButtonText}}</a>
      <a v-if="modal.showConfirmButton" href="javascript:void(0)" class="button {{modal.confirmButtonClass}}" v-touch:tap="submit">{{modal.confirmButtonText}}</a>
     </slot>
    </div>
   </div>
  </div>
 </div>
 <div v-show="show" class="modal-backup" transition="fade"></div>
</template> 

模態(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);
}

這里只是一些基本樣式,沒(méi)什么好說(shuō)的,這次項(xiàng)目是在移動(dòng)端,用了淘寶的自適應(yīng)布局方案,@rate是切稿時(shí)候的轉(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)來(lái)的參數(shù),對(duì)參數(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)容、是否顯示按鈕和按鈕的樣式,用一個(gè)computed來(lái)做參數(shù)默認(rèn)值的控制。

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

data() {
 return {
  show: false, // 是否顯示模態(tài)框
  resolve: '',
  reject: '',
  promise: '', // 保存promise對(duì)象
 };
},
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對(duì)象
  * @returns {Promise}
  */
 confirm() {
  this.show = true;
  this.promise = new Promise((resolve, reject) => {
   this.resolve = resolve;
   this.reject = reject;
  });
  return this.promise; //返回promise對(duì)象,給父級(jí)組件調(diào)用
 },
},

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

調(diào)用

<!-- template -->
<confirm v-ref:dialog :modal-options.sync="modal"></confirm>
<!-- methods -->
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)建一個(gè)索引,就很方便拿到模態(tài)框組件內(nèi)部的方法了。這樣一個(gè)模態(tài)框組件就完成了。

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

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

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

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

首先在根組件接收dispatch過(guò)來(lái)的transmit事件,再將transmit事件傳遞過(guò)來(lái)的eventName廣播下去

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

其次是模態(tài)框組件內(nèi)部接收從父級(jí)組件傳遞過(guò)來(lái)的確定和取消按鈕所觸發(fā)的事件名,點(diǎn)擊取消和確定按鈕的時(shí)候觸發(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);
}

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

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

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

這種方法看起來(lái)是不是很暈?所以vue 2.0取消了$dispatch和$broadcast,我們?cè)谧罱捻?xiàng)目中雖然還在用1.0,但是也不再用$dispatch和$broadcast,方便以后的升級(jí)。

使用emit來(lái)觸發(fā)

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

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

調(diào)用:

<modal title="Modal Title" :show.sync="show" @ok="ok" @cancel="cancel">
 Modal Text
</modal>

但是我們?cè)谑褂玫臅r(shí)候經(jīng)常會(huì)遇到這樣的場(chǎng)景,在一個(gè)組件的內(nèi)部,經(jīng)常會(huì)用到多個(gè)對(duì)話(huà)框,對(duì)話(huà)框可能只是文字有點(diǎn)區(qū)別,回調(diào)不同,這時(shí)就需要在template中為每個(gè)對(duì)話(huà)框都寫(xiě)一次,有點(diǎn)麻煩。

參考資料

vue.js dynamic create nest modal
es6 Promise對(duì)象
vue-bootstrap-modal

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》,歡迎大家學(xué)習(xí)閱讀。

關(guān)于vue.js組件的教程,請(qǐng)大家點(diǎn)擊專(zhuān)題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue中el-form-item展開(kāi)項(xiàng)居中的實(shí)現(xiàn)方式

    vue中el-form-item展開(kāi)項(xiàng)居中的實(shí)現(xiàn)方式

    這篇文章主要介紹了vue中el-form-item展開(kāi)項(xiàng)居中的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • VUE中如何實(shí)現(xiàn)阻止事件冒泡

    VUE中如何實(shí)現(xiàn)阻止事件冒泡

    這篇文章主要介紹了VUE中如何實(shí)現(xiàn)阻止事件冒泡,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • 深入了解Vue中雙向數(shù)據(jù)綁定原理

    深入了解Vue中雙向數(shù)據(jù)綁定原理

    vue是一個(gè)mvvm框架,即數(shù)據(jù)雙向綁定,即當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候,視圖也就發(fā)生變化,當(dāng)視圖發(fā)生變化的時(shí)候,數(shù)據(jù)也會(huì)跟著同步變化。本文將通過(guò)示例詳解其中原理,需要的可以參考一下
    2022-05-05
  • 關(guān)于怎么在vue項(xiàng)目里寫(xiě)react詳情

    關(guān)于怎么在vue項(xiàng)目里寫(xiě)react詳情

    本篇文章是在vue項(xiàng)目里寫(xiě)tsx的一篇介紹。其實(shí)vue里面寫(xiě)jsx也挺有意思的,接下來(lái)小編九給大家詳細(xì)介紹吧,感興趣的小伙伴請(qǐng)參考下面的文章內(nèi)容
    2021-09-09
  • 一文教會(huì)你快速上手vue的登錄界面(最新版)

    一文教會(huì)你快速上手vue的登錄界面(最新版)

    幾乎每個(gè)項(xiàng)目都會(huì)使用登錄頁(yè)面,這篇文章主要給大家介紹了如何通過(guò)一文教會(huì)你快速上手vue的登錄界面,文中通過(guò)實(shí)例代碼介紹的很詳細(xì),需要的朋友可以參考下
    2022-11-11
  • element中TimePicker時(shí)間選擇器禁用部分時(shí)間(顯示禁用到分鐘)

    element中TimePicker時(shí)間選擇器禁用部分時(shí)間(顯示禁用到分鐘)

    這篇文章主要介紹了element中TimePicker時(shí)間選擇器禁用部分時(shí)間(顯示禁用到分鐘),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-03-03
  • 深入解析Vue 組件命名那些事

    深入解析Vue 組件命名那些事

    本篇文章主要介紹了深入解析Vue 組件命名那些事,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-07-07
  • VUE 自定義組件模板的方法詳解

    VUE 自定義組件模板的方法詳解

    這篇文章主要介紹了VUE 自定義組件模板的方法,結(jié)合實(shí)例形式詳細(xì)分析了vue.js自定義組件模板的相關(guān)步驟與操作技巧,需要的朋友可以參考下
    2019-08-08
  • Element el-table的formatter和scope?template不能同時(shí)存在問(wèn)題解決辦法

    Element el-table的formatter和scope?template不能同時(shí)存在問(wèn)題解決辦法

    本文主要介紹了ElementUI?el-table?的?formatter?和?scope?template?不能同時(shí)存在問(wèn)題解決辦法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • vue axios同步請(qǐng)求解決方案

    vue axios同步請(qǐng)求解決方案

    這篇文章主要介紹了vue axios同步請(qǐng)求解決方案,需要的朋友可以參考下
    2017-09-09

最新評(píng)論