el-dialog封装,dialog控件方法
这篇文章主要为大家介绍了封装一个更易用的对话组件过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
目录
场景搭建环境创建组件创建调用组件的钩函数对话的缓存、隐藏隐藏缓存完整代码总结
场景
在项目中，我们经常会遇到使用弹窗的场景，但有时组件库自带的弹窗不能满足我们的需求，需要我们自己封装，这时我们如何去自定义一个更加方便调用的弹窗？
搭建环境
首先我们需要搭建一个Vue3 ts的环境。
用轻快地的官方模板：
yarn create vite demo-app-template vue-ts
进入并安装依赖
激光唱片演示应用程序
故事
依赖安装完成后启动应用
纱线开发
创建组件
先在src/组件目录下创建MyDialog.vue，搭建一个组件的基本框架
脚本语言设置
从“vue”导入{ ref，reactive }；
defineProps({
消息：{
类型：字符串，
默认值： ,
},
标题：{
类型：字符串，
默认值： ,
},
});
const emits=defineEmits {
(e:’确认):作废；
(e:’关):void
}();
const visible=ref(true)；
函数点击确认(){
console.log(确认);
发出("确认");
}
函数单击关闭(){
console.log(取消);
发出("关闭");
}
/脚本
模板
div class=wrap v-if=visible
div class=容器
div class= title"{ title } }/div
div class=内容
div{{ message }}/div
/div
div class=控制
按钮@click=clickConfirm 确认/按钮
按钮@click=clickClose 取消/按钮
/div
/div
/div
/模板
样式范围。换行{
位置：绝对；
top:0；
左：0;
背景：rgba(15，15，15，0.5)；
宽度：100%;
身高：100%;
}。容器{
位置：绝对；
top:50%；
左：50%;
transform: translate(-50%，-50%)；
最小宽度：300像素；
最小高度：200像素
填充：10px
背景：白色；
显示器：flex
伸缩方向：列；
}。内容{
flex:1；
填充：10px
文本对齐：左对齐；
}。标题{
最小高度：30px
}。控制
显示器：flex
宽度：100%;
justify-content:space-around；
}
/风格
创建调用组件的hook函数
在科学研究委员会目录下创建钩住目录，然后再钩住目录下创建useMyDialog.ts .
函数调用组件我们需要：
将组件转换成虚拟节点将虚拟节点转换成数字正射影像图然后渲染到页面从“vue”导入{ createVNode，render，ComponentPublicInstance }。
导出默认函数使用我的对话框(选项？任何){
常量属性={
.选项，
};
const vm=createVNode(MyDialog，props)；
const容器=文档。createelement( div )；
渲染(vm，容器);
document.querySelector(#app )？追加子容器(容器。firstelementchild！);
}
ps:
container.firstElementChild！中的！表示container.firstElementChild不为空或者不明确的
接下来我们在App.vue中测试一下
脚本安装语言=ts
从导入使用我的对话框./hooks/使用我的对话框；
函数showDialog() {
使用我的对话框({
消息："测试1",
onClose: ()={
控制台。log( self )；
},
});
}
/脚本
模板
button @click=showDialog 显示对话框/按钮
/模板
Dialog的缓存、隐藏
隐藏
我们需要将关闭返回出去，这样我们就可以手动调用关闭函数关闭对话。
在useMyDialog.ts中添加
从“vue”导入{ ComponentPublicInstance，VNode }。
导出默认函数使用我的对话框(选项？任何){
const userCloseFn=option？事件
道具。on close=()=gt；{
close()；
userCloseFn？userCloseFn()；
};
函数关闭(虚拟机：虚拟节点){
（
vm.component！代理为ComponentPublicInstancelt { visible:布尔} gt
).可见=假；
}
返回{
close: close.bind(null，vm)，
}
}
缓存
现在每次点击显示对话按钮时都会创建一个新的组件实例，这不是我们的预期，所以我们需要将组件进行缓存。
在useMyDialog.ts中添加
从“vue”导入{ ComponentPublicInstance }
const instances:any[]=[]；
导出默认函数使用我的对话框(选项？任何){
const tempVm: any=instances.find(
（项目)=1
` ${item.vm.props？留言？ }`===`${(任意选项)。留言？}`
);
if (tempVm) {
（
tempVm.vm.component！代理为ComponentPublicInstance{
可见：布尔型；
}
).可见=真；
返回{
close: close.bind(null，tempVm.vm)，
};
}
}
完整代码
src/hooks/useMyDialog.ts
从“vue”导入{ createVNode，render，ComponentPublicInstance，VNode }。
从导入我的对话框./组件/我的对话框。vue ；
const instances:any[]=[]；
导出默认函数使用我的对话框(选项？任何){
常量属性={
.选项，
};
const userCloseFn=option？事件
props.onClose=()={
关闭(VM)；
userCloseFn？userCloseFn()；
};
函数关闭(虚拟机：虚拟节点){
（
vm.component！代理为ComponentPublicInstance { visible:boolean }
).可见=假；
}
const tempVm: any=instances.find(
（项目)=1
` ${item.vm.props？留言？ }`===`${(任意选项)。留言？}`
);
if (tempVm) {
（
tempVm.vm.component！代理为ComponentPublicInstance{
可见：布尔型；
}
).可见=真；
返回{
close: close.bind(null，tempVm.vm)，
};
}
const vm=createVNode(MyDialog，props)；
const容器=文档。createelement( div )；
渲染(vm，容器);
document.querySelector(#app )？追加子容器(容器。firstelementchild！);
实例。push({ VM })；
返回{
close: close.bind(null，vm)，
};
}
总结
这种调用方式不局限于对话组件，其他有需要的业务组件也可以通过这种封装方式去简化调用。
以上代码其实是元素加的消息组件的简化版，有兴趣的可以去看看元素加的源码，链接贴在下方。
元素加源码
以上就是封装一个更易用的对话组件过程详解的详细内容，更多关于对话组件封装的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。