vue的dialog,封装一个dialog组件
写业务时很常见的一个场景是，同一个表单需要在不同的页面调用，常见的交互是以弹出的形式显示表单。主要介绍了Vue对对话框封装的实现，有兴趣的可以了解一下。
目录
Vue2写入
Vue3插件版本编写
Vue3动态组件编写
比较hack的一些写作方法。
编写业务时的一个常见场景是，同一个表单需要在不同的页面上调用。常见的交互是以弹出的形式显示表单，但是在每个页面上重复介绍表单组件有时会比较麻烦。
有两种解决方案：
在根组件中引入动态组件，通过这个来控制动态组件的展现形式。业务中的root.opendialog(名称，道具)。
以插件的形式调用，比如这个。$ dialog (edit dialog.vue ，props)
当然，业务对话组件应该有一套规范。props接收一个onOk和onCancel回调，在数据中定义一个可见属性。
模板
El-dialog:title= title :visible . sync= visible 附加到正文
！-商业代码-
/el-dialog
/模板
脚本
导出默认值{
道具：[onOk ，其他业务所需属性]，
data() {
返回{
可见：假
}
}
}
/脚本
Vue2 写法
在Vue2中，个人感觉写插件很容易。实现如下：我用blending做一些操作，业务解耦。
不太好的是组件是动态插入的，Vue devtools要刷新才能看到组件。
const mixin={
已安装(){
document.body.appendChild(this。$el)
this.visible=true
},
观察：{
可见(值){
//动画结束后销毁实例。
if (value===false) {
setTimeout(()={
这个。$destroy()
如果(这个。$el这个。$el.parentNode) {
这个。$ El . parent node . remove child(this。$el)
}
}, 400)
}
}
}
}
导出默认值{
安装(Vue，选项){
Vue.prototype.$dialog=(名称，道具)={
//相对于插件的位置，静态编译时会检查
导入(./组件/对话框/名称)。然后(模块={
const component=模块.默认值
const mixins=component . mixins []
mixins . push(mixin)///实现自动打开，动态混合生命周期函数和销毁操作。
component.mixins=mixins
return Vue.extend(组件)
})。然后(Dialog={
const dialog=新对话框({
propsData: props {}
})
对话。$mount()
})
}
}
}
调用方式如下，注意onOk回调的这个点，用箭头函数直接避开。
这个。$dialog(GroupEdit.vue ，{
类型：“编辑”，
群组：{}，
onOk: ()={
this.freshList()
}
})
Vue3 插件版写法
可惜由于Vue3的升级，Vue.extend没了，$mount也没了，所以组件只能在应用中渲染。
每个应用程序之间的数据是隔离的，因此插件等必须重新引入。同时，相互之间的互动也比较麻烦。应该可以引入相同的vuex实例，但是没有尝试过。
对于低耦合，您只能创建一个新的应用程序来挂载渲染。
从“vue”导入{ createApp，defineComponent }
从“element-plus”导入ElementPlus
const mixin={
已安装(){
document.body.appendChild(this。$el)
this.visible=true
},
观察：{
可见(值){
//动画结束后销毁实例。
if (value===false) {
setTimeout(()={
这个。$.appContext.app.unmount()
}, 400)
}
}
}
}
导出默认值{
安装(应用程序){
app . config . global properties . $ dialog=(name，props)={
导入(./组件/对话框/名称)。然后(模块={
const component=模块.默认值
let mixins=component.mixins []
推(mixin)
component.mixins=mixins
返回定义组件(组件)
})。然后(对话框={
const app=createApp(Dialog，props {})
app.use(ElementPlus)
app。挂载(文档。createelement( div ))
})
}
}
}
Vue3 动态组件写法
在Vue3里面，插件版的写法同样达到了要求，但是完全是一个新引应用了，如果在业务里访问这个. root，vuex，路由器还是有点麻烦的
所以Vue3里面还是动态组件的写法比较好
在根组件引入动态组件，定义一些控制变量
模板
路由器视图/路由器视图
组件：is= currentDialog v-bind= currentDialogProps /
/模板
脚本
导出默认值{
data() {
返回{
currentDialog: null，
currentDialogProps: null
}
}
}
/脚本
调用的的话这个10.99美元根.$dialog()，看起来太难看，其实还是可以手动模拟插件的效果的
const app=createApp(App)
const VM=app。装载(应用数量)
初始化对话框（应用程序，虚拟机)
函数初始化对话框(应用程序，虚拟机){
const mixin={
已安装(){
this.visible=true
},
观察：{
可见（值){
//动画结束后销毁实例
if (value===false) {
setTimeout(()={
这个. root.currentDialog=null
这个. root.currentDialogProps={}
}, 400)
}
}
}
}
app。配置。全局属性。$ dialog=(名称，道具)={
导入(。/组件/对话框/名称)。然后（模块={
常量组件=模块。默认值
let mixins=component.mixins []
推(mixin)
component.mixins=mixins
//不需要定义组件（组件)
VM。当前对话框=标记原始(组件)
VM。currentdialogprops=markRaw(props { })
})
}
}
一些比较 hack 的写法
vue3组件实例获取应用实例
虚拟机.$.appContext.app==app
vue3应用实例获取组件实例，注意_实例仅在偏差环境能访问到
应用程序._instance.proxy==vm
应用程序._instance.root.proxy==vm
应用程序._instance.ctx.$root==vm
骚操作还是有的，但是最好不要用
const app=createApp(App)
const VM=app。装载(应用数量)
如果(过程。环境。node _ ENV===生产){
应用程序._instance={
代理：虚拟机，
根：{
代理：虚拟机
},
ctx: {
$root:虚拟机
}
}
}
到此这篇关于某视频剪辑软件实现对话封装的文章就介绍到这了，更多相关某视频剪辑软件对话框封装内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。