簡單介紹一下vue中常用dialog元件的封裝：

實現動態傳入內容，實現取消，確認等回撥函式。

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

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

import dialogBar from './dialog.vue'

components:{
    'dialog-bar': dialogBar,
},

<dialog-bar></dialog-bar>

點選一個按鈕顯示彈窗，並保證關閉彈窗後再次點選依舊顯示

在彈窗元件中定義一個value值：v-model="sendVal"，sendVal初始值為false。 
在開啟彈窗的方法中賦值：

openMask(){
    this.sendVal = true;
}

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

props: {
    value: {}    // 注意此處獲取的value對應的就是元件標籤中的v-model
}

定義一個showMask變數用於控制是否顯示彈窗

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

而要想關閉彈窗，只需要定義一個方法：

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

此刻已經可以實現彈窗的顯示與退出。 
下面我們要實現的是動態新增標題，內容等，在元件標籤中加入title，content：

<dialog-bar title="我是標題" content="我是內容"></dialog-bar>

可以運用vue的資料雙向繫結，更換title，content。 
在dialog.vue中獲取內容：

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

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

我們可以運用同樣的原理來獲取不同按鈕中的自定名稱。 
下面我們利用傳入的不同type來確定不同的按鈕，並提供不同的回撥函式。

<dialog-bar title="我是標題" content="我是內容" type="danger" dangerText="這是刪除按鈕"></dialog-bar>

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

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

dangerBtn(){
    this.$emit('danger');    // 傳送一個danger事件作為回撥函式
    this.closeMask();    // 關閉彈窗
},

在標籤中定義danger的回撥並做一些操作：

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

clickDanger(){
    console.log("這裡是回撥函式")
},

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

    props: {
        value: {},
        // 型別包括 defalut 預設， danger 危險， confirm 確認，
        type:{
            type: String,
            default: 'default'
        },
        content: {
            type: String,
            default: ''
        },
        title: {
            type: String,
            default: ''
        },
        confirmText: {
            type: String,
            default: '確認'
        },
        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>

點選此處去github下載彈窗程式碼： https://github.com/wwjhzc/vue-dialog 
作者：rookie.he（kuke_kuke） 
部落格連結：http://blog.csdn.net/qq_33599109 
歡迎關注支援，謝謝！