Vue2.x 使用 extend方法创建 自定义对话框

对话框

该组件是个对话框，基于 Vue 、element-ui 的 【Dialog 对话框】& 【Button 按钮】

组件调用方式、优点及需求来源

组件调用方式

this.$daillog({
	text: '123'	// 这里定义提示文字
})
    .then(() => { // 点击确定 后需要执行的操作
		 console.log('success')	
    })
    .catch(() => { // 点击取消 后需要执行的操作
         console.log('fail')
     })

组件优点

使用插件方式引入，不需要在模板中定义

需求来源

一个对话框，使用页面很多，只有提示文件是动态的，但是需要知道用户点击了哪个按钮。每次都在模板中定义很麻烦

代码分析

Dailog.vue（定义构造器）

<template>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" v-if="dialogVisible">
        <div style="padding: 20px;">
            <span>{{text}}</span>
        </div>

        <span slot="footer" class="dialog-footer">
            <el-button @click="handle('cancel')">取 消</el-button>
            <el-button type="primary" @click="handle('ok')">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
export default {
    props: {
        text: String
    },
    data() {
        return {
            dialogVisible: false,
            callback: null
        }
    },
    methods: {
        handle(action) {
            this.dialogVisible = false
            this.callback(action)
        }
    }
}
</script>

dailog.js（使用 extend 方法创建组件实例）

import Vue from 'vue'
import Dialog from './Dialog.vue'

let instance = null

// 创建实例
function initInstance(propsData) {
    const Instance = Vue.extend(Dialog)
    instance = new Instance({
        propsData,
        el: document.createElement('div')
    })
}

// 这里主要用于将props项合并
function mergeOpt({ text }) {
    return {
        text
    }
}

// 打开对话框
function showDialog() {
    instance.dialogVisible = true
    document.body.appendChild(instance.$el)
}

export default function(opstions = {}) {
    const propsData = mergeOpt(opstions)

    if (!instance) {
        initInstance(propsData)
    }

    showDialog()

    return new Promise((resolve, reject) => {
    	// 这里通过重新定义 instance callback 变量的方式，来 触发 resolve 和 reject
        instance.callback = action => {
            if (action === 'ok') {
                resolve()
            } else {
                reject()
            }
            setTimeout(() => {
                instance.$destroy()
                instance = null
            })
        }
    })
}

install.js（抛出一个install 方法，用户插件注册）

import Daillog from './Daillog .js'
export default {
    install: function(Vue) {
        Vue.prototype.$daillog= Daillog 
    }
}