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)
}

  import { dialogList, closeDialog } from "./index"

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

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

• addDialog 调用唤起弹窗的函数

• closeDialog 关闭弹窗的函数

在app.vue中挂载

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

使用

创建一个弹窗组件

  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
    })
  }

在列表页面唤醒弹窗

import { 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”的内容了，经过本文的学习后，相信大家对vue3如何使用element-plus的dialog这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！