Products
GG网络技术分享 2025-03-18 16:14 0
在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上发布刷新列表的事件。
列表中做事件订阅，就可以完成数据的通讯了：
上边的例子是一些比较简单的经验之谈，感兴趣的朋友可以看一下，有什么问题欢迎随时交流，学无止境，大家一起努力提高。
页面中会有很多时候需要弹窗提示，我们可以写一个弹窗组件，但是如果每个页面都引入这个组件，太麻烦了，所以我们将它变成全局组件，需要用的时候直接通过JS调用即可，不需要在每个页面引入了
效果图
弹窗组件
新建一个弹窗的组件——popup.vue
| <template> <transition name=\'fade\'> <!-- 蒙版 --> <div class=\"mask\" v-if=\"show\" @touchmove.prevent> <div class=\"window\"> <img class=\"shadow\" :src=\"imgUrl\" alt=\"\"> <h1>{{title}}</h1> <p>{{content}}</p> <button @click=\"btnClick\">{{btnText}}</button> </div> <img @click=\"show = false\" v-fb class=\"close\" src=\"../../../pages/signin/dialog/images/关闭.png\" alt=\"\"> </div> </transition> </template> <script> export default { name: \'app\', data () { return { show: false, imgUrl: \'\', title: \'\', content: \'\', btnText: \'\', click: \'\' } }, created () { }, methods: { btnClick () { this.click() this.show = false } } } </script> <style lang=\"less\" scoped> @import \"../../../assets/css/minx/minx\"; @import \"../../../assets/css/pixel/pixel\"; // 渐变过渡 .fade-enter, .fade-leave-active { opacity: 0; } .fade-enter-active, .fade-leave-active { transition: opacity .35s; } // 全局弹窗 .mask { .fixed; z-index: 10; background:rgba(0,0,0,0.65); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 75/75rem; .window{ height: 400/75rem; width: 100%; background: #fff; border-radius:8px; text-align: center; .shadow{ width: 270/75rem; margin-top: -90/75rem; } h1{ margin-top: 32/75rem; font-size:32/75rem; color:#f1300b; line-height:32/75rem; font-weight: 600; } p{ margin-top: 32/75rem; font-size:28/75rem; color:#222222; line-height:40/75rem; } button{ margin-top: 34/75rem; background:#f95644; border-radius:10px; width:23/75remx; height:64/75rem; font-size:28/75rem; color:#ffffff; } } .close{ width:60/75rem; height:60/75rem; margin-top: 40/75rem; } } </style> |
popup.js文件
新建一个popup.js文件，写方法
| import Vue from \'vue\' import Popup from \'./popup.vue\' const PopupBox = Vue.extend(Popup) Popup.install = function (data) { let instance = new PopupBox({ data }).$mount() document.body.appendChild(instance.$el) Vue.nextTick(() => { instance.show = true // show 和弹窗组件里的show对应，用于控制显隐 }) } export default Popup |
main.js引入popup.js
| // 自定义全局弹窗组件 import Vue from \'vue\' import Popup from \'./components/dialog/popup\' Vue.prototype.$popup = Popup.install |
组件中使用方法
| methods: { btnClick () { this.$popup({ imgUrl: require(\'../../../static/images/shadow.png\'), // 顶部图片 title: \'我是标题\', content: \'我是内容\', btnText: \'我是按钮\', click: () => { // 点击按钮事件 this.$router.push(\'……\') } }) } } |
方便以后自己使用，大家也可以参考哦，也希望大家多多支持，谢谢~~
Demand feedback
