使用vue實(shí)現(xiàn)各類彈出框組件

發(fā)布時(shí)間：2020-09-04 22:48:20 來(lái)源：腳本之家閱讀：252 作者：kuke_kuke 欄目：web開(kāi)發(fā)

簡(jiǎn)單介紹一下vue中常用dialog組件的封裝：

實(shí)現(xiàn)動(dòng)態(tài)傳入內(nèi)容，實(shí)現(xiàn)取消，確認(rèn)等回調(diào)函數(shù)。

首先寫一個(gè)基本的彈窗樣式，如上圖所示。

在需要用到彈窗的地方中引入組件：

import dialogBar from './dialog.vue'
components:{
  'dialog-bar': dialogBar,
},
<dialog-bar></dialog-bar>

點(diǎn)擊一個(gè)按鈕顯示彈窗，并保證關(guān)閉彈窗后再次點(diǎn)擊依舊顯示

在彈窗組件中定義一個(gè)value值：v-model="sendVal"，sendVal初始值為false。

在打開(kāi)彈窗的方法中賦值：

openMask(){
  this.sendVal = true;
}

在dialog.vue組件中做如下操作：

props: {
  value: {}  // 注意此處獲取的value對(duì)應(yīng)的就是組件標(biāo)簽中的v-model
}

定義一個(gè)showMask變量用于控制是否顯示彈窗

mounted(){
  this.showMask = this.value;  // 在生命周期中，把獲取的value值獲取給showMash
},
watch:{
  value(newVal, oldVal){
    this.showMask = newVal;   // 監(jiān)測(cè)value的變化，并賦值。
  },
  showMask(val) {
    this.$emit('input', val);  // 此處監(jiān)測(cè)showMask目的為關(guān)閉彈窗時(shí)，重新更換value值，注意emit的事件一定要為input。
  }
},

而要想關(guān)閉彈窗，只需要定義一個(gè)方法：

closeMask(){
  this.showMask = false;
},

此刻已經(jīng)可以實(shí)現(xiàn)彈窗的顯示與退出。

下面我們要實(shí)現(xiàn)的是動(dòng)態(tài)添加標(biāo)題，內(nèi)容等，在組件標(biāo)簽中加入title，content：

<dialog-bar title="我是標(biāo)題" content="我是內(nèi)容"></dialog-bar>

可以運(yùn)用vue的數(shù)據(jù)雙向綁定，更換title，content。

在dialog.vue中獲取內(nèi)容：

props: {
value: {},
  content: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  },
},

<div class="dialog-title">{{title}}</div>
<div class="content" v-html="content"></div>

我們可以運(yùn)用同樣的原理來(lái)獲取不同按鈕中的自定名稱。

下面我們利用傳入的不同type來(lái)確定不同的按鈕，并提供不同的回調(diào)函數(shù)。

<dialog-bar title="我是標(biāo)題" content="我是內(nèi)容" type="danger" dangerText="這是刪除按鈕"></dialog-bar>

如傳入type為danger，我們可以在dialog.vue中props獲取type，并定義一個(gè)如下按鈕：

<div v-if="type == 'danger'" class="danger-btn" @click="dangerBtn">
  {{dangerText}}
</div>

dangerBtn(){
  this.$emit('danger');  // 發(fā)送一個(gè)danger事件作為回調(diào)函數(shù)
  this.closeMask();  // 關(guān)閉彈窗
},

在標(biāo)簽中定義danger的回調(diào)并做一些操作：

<dialog-bar title="我是標(biāo)題" content="我是內(nèi)容" type="danger" dangerText="這是刪除按鈕" @danger="clickDanger()"></dialog-bar>

clickDanger(){
  console.log("這里是回調(diào)函數(shù)")
},

同樣原理可以獲取和增添一些其他的操作：

 props: {
    value: {},
    // 類型包括 defalut 默認(rèn)， danger 危險(xiǎn)， confirm 確認(rèn)，
    type:{
      type: String,
      default: 'default'
    },
    content: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    confirmText: {
      type: String,
      default: '確認(rèn)'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    dangerText: {
      type: String,
      default: '刪除'
    },
  },

<div class="btns">
  <div v-if="type != 'confirm'" class="default-btn" @click="closeBtn">
    {{cancelText}}
  </div>
  <div v-if="type == 'danger'" class="danger-btn" @click="dangerBtn">
    {{dangerText}}
  </div>
  <div v-if="type == 'confirm'" class="confirm-btn" @click="confirmBtn">
    {{confirmText}}
  </div>
</div>

點(diǎn)擊此處去github下載彈窗代碼： https://github.com/wwjhzc/vue-dialog

總結(jié)

以上所述是小編給大家介紹的使用vue實(shí)現(xiàn)各類彈出框組件,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

向AI問(wèn)一下細(xì)節(jié)

使用vue實(shí)現(xiàn)各類彈出框組件

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽