vue3怎么使用element-plus的dialog

PHP中文网 • 2025年4月1日 16:32:39 • 编程技术 • 阅读 1

优点

摆脱繁琐的 visible 的命名，以及反复的重复 dom。

想法

将 dialog 封装成一个函数就能唤起的组件。如下：

addDialog({  title: "测试", //弹窗名  component: TestVue, //组件  width: "400px", //弹窗大小  props: {    //传给组件的参数    id: 0  },  callBack: (data: any) => {    //当弹窗任务结束后，调用父页面的回掉函数。（比如我新增完成了需要刷新列表页面）    console.log("回调函数", data)  }})

登录后复制

基于 el-dialog 进行初步封装

// index.tsimport { 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)" />        import { dialogList, closeDialog } from "./index"

登录后复制

首先定义了 dialogList,它包含了所有弹窗的信息。

component 使用 componet is 去动态加载子组件

addDialog 调用唤起弹窗的函数

立即学习“前端免费学习笔记（深入）”；

closeDialog 关闭弹窗的函数

在app.vue中挂载

import Mydialog from "@/components/gDialog/index.vue"

登录后复制

使用

创建一个弹窗组件

  父弹窗  打开子dialog  关闭弹窗  import { addDialog } from "@/components/gDialog/index"  import childVue from "./child.vue"  const props = defineProps(["id"])  console.log(props.id, "props")  const emit = defineEmits(["close"])  const closeDialog = () => {    emit("close", 1, 2, 34)  }  const openChildDialog = () => {    addDialog({      title: "我是子dialog",      width: "500px",      component: childVue    })  }

登录后复制

在列表页面唤醒弹窗

  列表页  打开dialogimport { addDialog } from "@/components/gDialog/index"import TestDialog from "./test.vue"const openDialog = () => {  addDialog({    title: "我是dialog",    width: "500px",    props:{      id:0    }    component: TestDialog,    callBack: (data: any) => {      //当弹窗任务结束后，调用父页面的回掉函数。（比如我新增完成了需要刷新列表页面）      console.log("回调函数", data)    }  })}

登录后复制

多层级弹窗嵌套

  子弹窗  关闭弹窗  import { addDialog } from "@/components/gDialog/index"  const emit = defineEmits(["close"])  const closeDialog = () => {    emit("close", 1, 2, 34)  }

登录后复制

以上就是vue3怎么使用element-plus的dialog的详细内容，更多请关注【创想鸟】其它相关文章！

发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3230296.html