<!-- el-dialog為elementui 2.5版本的組件，尚無拖拽彈窗功能，如需在vue2中添加拖拽功能，可以查看其他文檔 -->
<!-- 測(cè)試后，此處el-dialog可以替換為antd或其他UI庫dialog彈窗，同時(shí)也可以自己編寫彈窗樣式，皆可以滿足調(diào)用 -->
<template>
    <el-dialog  append-to-body :title="title" :visible.sync="visible" v-bind="dialogOption">
    <!-- props傳入到組件內(nèi)數(shù)據(jù)，接受即可 -->
        <component :is="component" v-bind="props" @cancel="cancel" @confirm="confirm"></component>
    </el-dialog>
</template>

let resolve = null
export default {
    data() {
        return {
            props: {},
            title: '',
            dialogOption: {},
            component: null,
            visible: true,
            onClose: () => { },
        }
    },
    methods: {
    //還可以更加精簡，但是目前為了方便易懂，先如此處理
        open({ title, dialogOption, component, props, onClose }) {
            this.title = title
            this.dialogOption = dialogOption
            this.component = component
            this.props = props
            this.visible = true
            this.onClose = onClose
            //異步處理相關(guān)邏輯，未來可用
            return new Promise((resolse, reject) => {
                resolve = resolse
            })
        },
        confirm(arg) {
            this.close()
            resolve(arg)
        },
        cancel() {
            this.close()
            resolve()
        },
        close() {
            //調(diào)用回調(diào)close,回傳傳入的close方法，銷毀組件
            this.visible = false
            this.$emit('close')
        }
    },
};

import Component from './component.vue'
import Vue from 'vue'

//定義調(diào)用類
class Dialog {
    //定義相關(guān)實(shí)例，每次new Dialog的時(shí)候都會(huì)創(chuàng)建一個(gè)新的實(shí)例，這樣彈窗之間就不會(huì)相互影響
    instance = null;
    component = null

    open(option) {
        //創(chuàng)建Vue實(shí)例，傳入相關(guān)參數(shù)信息
        this.instance = new Vue({
            render(h) {
                return h(Component, { title: option.title }, option.chidren)
            }
        })
        //調(diào)用實(shí)例的$mount()掛載組件
        this.component = this.instance.$mount();
        document.body.appendChild(this.component.$el);
        const notification = this.instance.$children[0];
        return notification.open(option);
    }
    close() {
        //傳入的銷毀方法，直接在dom樹上將當(dāng)前組件直接銷毀
        if (this.component) {
            document.body.removeChild(this.component.$el)
        }
        this.component = null
    }
}
export default Dialog

<template>
<div>
    <p><el-button type="primary" @click="dialogDynamticFunc">測(cè)試按鈕</el-button></p>
</div>
</template>

<script>
//引入封裝組件及全局彈窗組件
import ChildComponent from './ChildComponent.vue'
import Dialog from './Dialog/dialog'

export default{
    methods:{
        dialogDynamticFunc() {
            let vueIns = this
            //new一個(gè)全局類
            let win = new Dialog()
            //調(diào)用open方法，傳入相關(guān)參數(shù)
            win.open({
                 title: '選擇用戶',
                 dialogOption: { width: '600px' },
                 component: ChildComponent,
                 props: {
                            id: 1
                        },
                //定義回調(diào)關(guān)閉函數(shù)，
                 onClose: () => {
                 win.close()
             }
            })
            }
    }
}
</script>