我面对的需求

在首页的一个列表中，点击其中的一项需要打开一个详情对话框，该对话框有多个按钮，可以再打开不同的对话框
对话框唯一，当打开一个新对话框时，关闭上一个

我对需求的分析

不需要考虑对话框之间层级关系
对话框必须插入在body的下一级
以js的方式创建对话框组件而非模板上使用

我的实现过程

第一步创建一个对话框模板组件dialog.vue

    <template>
        <div class="dialog_fix">
            <div class="dialog" :style="{width: width}">
                <div class="header">
                    <div class="title">{{ title }}</div>
                    <div class="close" @click="$emit('close')"><i class="el-icon-close"></i></div>
                </div>
    
                <div class="content">
                    <slot name="content"></slot>
                </div>
    
                <div class="footer">
                    <slot name="toolbar"></slot>
                </div>
            </div>
        </div>
    </template>
    <script>
    export default {
        props: ["title", "width"]
    }
    </script>

创建的只是个基本模板，对话框大致样式需一致，所以先封装对话框模板

创建某对话框组件warnDialog.vue

<template>
    <v-dialog title="..." width="500px" @close="closeDialog">
        <template slot="content">
            ...
        </template>
        <template slot="toolbar">
            ...
        </template>
    </v-dialog>
</template>
<script>
// 组件
import Dialog from './dialog';

export default {
    components: {
        'v-dialog': Dialog
    },
    data() {
        return {
            isDestroy: false
        }
    },
    created() {
    },
    mounted() {
        const body = document.querySelector("body");
        if (body.append) {
            body.append(this.$el);
        } else {
            body.appendChild(this.$el);
        }
    },
    destroyed() {
    },
    methods: {
        closeDialog() {
            this.isDestroy = true;
            this.$destroy(true);
            this.$el.parentNode.removeChild(this.$el);
        }
    }
    
}
</script>

这里是关键代码了，网上比较多的，将当前组件挂载到body下。
closeDialog就是关闭这个对话框的方法，isDestroy也很关键，这里不做介绍，遇到问题自然能明白其作用。

使用某对话框组件

import Vue from 'vue';
import WarnDialog from '../dialogs/warnDialog'; // 对话框
const dialog = Vue.extend(WarnDialog);
const instance = new dialog({
    data: {
        unitId: item.id
    }
});
instance.$mount();
this.dialog = instance;

这里不懂的可以直接实际操作一下，vue组件时可以直接这样实例的

了解一下

灵感来自elementUI的message组件，刚实现就直接拿了出来，能优化的地方请指出。

Vue开发日记，封装对话框组件

我面对的需求

我对需求的分析

我的实现过程

了解一下