VUE前端编程：如何通过全局对话框引入动态组件

在VUE编程中，经常会遇到对话框，但ElementUI或者是AntD提供的模态框一是要在每个页面中写Dialog，一个是对Dialog中含有的组件定制能力有限。因此，这里提供一个全局对话框并动态引入组件，从而有效地提高系统弹性和减少开发量。好，我们先看一下效果图：

右抽屉式，内嵌一个Creator

居中弹窗，内嵌一个Deleter，居中Dialog可以全屏

全局对话框

全局对话框的思路其实很简单，就是通过VUE的定义一个全局变量$dialog，并管理和维护一个在DOM中动态增加或删除的节点。

先定义一个Dialog VUE用作展示，动态组件也是写在这里面，后面我们细谈。

如下为定义dialogModel：

import Vue from 'vue';

import dialog from './dialog-box.vue';

let dialogBuilder = Vue.extend(dialog); //刚才定义的的VUE

let dialogModal = (o) =>{

let dialogDom = new dialogBuilder({

el: document.createElement('div'),

})

document.body.appendChild(dialogDom.$el);

//以下是调用环境传给Dialog的参数

dialogDom.title=o.title;

dialogDom.component=o.component; //传入动态组件

dialogDom.position=o.position;

dialogDom.widthOf=o.widthOf;

dialogDom.heightOf=o.heightOf;

dialogDom.params=o.params;

dialogDom.value=o.value;

dialogDom.enableFooter=o.enableFooter;

dialogDom.footComponent=o.footComponent;

dialogDom.footValue=o.footValue;

}

export default dialogModal;

在main.js中引入：

import dialog from '@/hayoo/chameleon/dialogs/dialog'

Vue.prototype.$dialog=dialog

好，只要在需要使用Dialog的地方进行配置就可以了，如上例的新增资产：

动态组件

接下来我们看一下动态组件，在开始的dialog VUE组件中，我们引入动态组件Component，在该例中，我引入了两个组件，一个是内容，一个是固化在底部的Footer，其原理都是一样的：

上例中，注意动态组件上的参数，这里指定的参数名如果和我们自定义的属性名一致，这里会自动传值，如果没有对应的属性名，那将会进入组件的$attrs中，这里注意一下。另外，组件里面可以通过触发@onQuit事件和dialog的关闭机制链接，实现定制组件关闭弹窗。

组件引入通过Component的is属性完成，在dialog Vue组件中，定义如下：

定义组件按我们正常引入即可：

调用组件的参数在指定dialog时可以一起指定，但注意这里的传参实际上是dialogModal完成的，因此，所有的参数必须在dialogModal中都要设置。

通讯机制

到这里基本上就完成了，接下来我们看动态组件和调用环境的通讯机制，一开始想用Vuex的，但发现dialog预警识别不到vuex，所以我偷懒用了EventBus，大家这里可以自己研究一下更好的通讯机制。如刚才的例子里，我在creator中点击保存时Axios的回调函数中，我做了关闭对话框的事件和EventBus上发布刷新列表的事件。

列表中做事件订阅，就可以完成数据的通讯了：

上边的例子是一些比较简单的经验之谈，感兴趣的朋友可以看一下，有什么问题欢迎随时交流，学无止境，大家一起努力提高。

Vue自定义全局弹窗组件操作

页面中会有很多时候需要弹窗提示，我们可以写一个弹窗组件，但是如果每个页面都引入这个组件，太麻烦了，所以我们将它变成全局组件，需要用的时候直接通过JS调用即可，不需要在每个页面引入了

效果图