这篇文章主要介绍了vue3怎么使用element-plus的dialog的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue3怎么使用element-plus的dialog文章都会有所收获，下面我们一起来看看吧。
摆脱繁琐的 visible 的命名，以及反复的重复 dom。
将 dialog 封装成一个函数就能唤起的组件。如下：
计算
安全
数据库
网络和加速
企业服务
addDialog({
title: "测试", //弹窗名
component: TestVue, //组件
width: "400px", //弹窗大小
props: {
//传给组件的参数
id: 0
},
callBack: (data: any) => {
//当弹窗任务结束后，调用父页面的回掉函数。（比如我新增完成了需要刷新列表页面）
console.log("回调函数", data)
}
})// 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)
}<template>
<Teleport to="body">
<el-dialog
v-for="(item, index) in dialogList"
:key="index"
:title="item.title"
:width="item.width"
v-model="item.visible"
>
<component :is="item.component" v-bind="item.props" @close="(...args:any) => closeDialog(item, index, args)" />
</el-dialog>
</Teleport>
</template>
<script setup lang="ts">
import { dialogList, closeDialog } from "./index"
</script>首先定义了 dialogList,它包含了所有弹窗的信息。
component 使用 componet is 去动态加载子组件
addDialog 调用唤起弹窗的函数
closeDialog 关闭弹窗的函数
<script setup>
import Mydialog from "@/components/gDialog/index.vue"
</script>
<template>
<router-view />
<Mydialog></Mydialog>
</template>
<style scoped>
</style><!-- test.vue -->
<template>
父弹窗
<el-button type="primary" @click="openChildDialog">打开子dialog</el-button>
<el-button type="primary" @click="closeDialog">关闭弹窗</el-button>
</template>
<script setup lang="ts">
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
})
}
</script><!-- list.vue -->
<template>
列表页
<el-button type="primary" @click="openDialog">打开dialog</el-button>
</template>
<script setup lang="ts">
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)
}
})
}<!-- child.vue -->
<template>
子弹窗
<el-button type="primary" @click="closeDialog">关闭弹窗</el-button>
</template>
<script setup lang="ts">
import { addDialog } from "@/components/gDialog/index"
const emit = defineEmits(["close"])
const closeDialog = () => {
emit("close", 1, 2, 34)
}
</script>关于“vue3怎么使用element-plus的dialog”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue3怎么使用element-plus的dialog”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://juejin.cn/post/7224007334514638903
