vue3如何使用element-plus的dialog
这篇文章主要讲解了“vue3如何使用element-plus的dialog”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue3如何使用element-plus的dialog”吧!
我们提供的服务有:网站制作、成都网站建设、微信公众号开发、网站优化、网站认证、玛沁ssl等。为千余家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的玛沁网站制作公司
优点
摆脱繁琐的 visible 的命名,以及反复的重复 dom。
想法
将 dialog 封装成一个函数就能唤起的组件。如下:
addDialog({ title: "测试", //弹窗名 component: TestVue, //组件 width: "400px", //弹窗大小 props: { //传给组件的参数 id: 0 }, callBack: (data: any) => { //当弹窗任务结束后,调用父页面的回掉函数。(比如我新增完成了需要刷新列表页面) console.log("回调函数", data) } })
基于 el-dialog 进行初步封装
// index.ts import { reactive } from "vue" type dialogOptions = { title: string component: any props?: Object width: string visible?: any callBack?: Function } export const dialogList: dialogOptions[] = reactive([]) export const addDialog = (options: dialogOptions) => { dialogList.push(Object.assign(options, { visible: true })) } export const closeDialog = (item: dialogOptions, i: number, args: any) => { dialogList.splice(i, 1) item.callBack && item.callBack(...args) }
closeDialog(item, index, args)" />
首先定义了 dialogList,它包含了所有弹窗的信息。
component 使用 componet is 去动态加载子组件
addDialog 调用唤起弹窗的函数
closeDialog 关闭弹窗的函数
在app.vue中挂载
使用
创建一个弹窗组件
父弹窗打开子dialog 关闭弹窗
在列表页面唤醒弹窗
列表页打开dialog
感谢各位的阅读,以上就是“vue3如何使用element-plus的dialog”的内容了,经过本文的学习后,相信大家对vue3如何使用element-plus的dialog这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
本文名称:vue3如何使用element-plus的dialog
URL网址:http://myzitong.com/article/jgdcjs.html