优点
摆脱繁琐的 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)
}首先定义了 dialogList,它包含了所有弹窗的信息。
component 使用 componet is 去动态加载子组件
-
addDialog 调用唤起弹窗的函数
立即学习“前端免费学习笔记（深入）”；
closeDialog 关闭弹窗的函数
在app.vue中挂载
使用
创建一个弹窗组件
父弹窗打开子dialog 关闭弹窗
在列表页面唤醒弹窗
列表页打开dialog
