这篇文章主要介绍了vue3怎么使用element-plus的dialog的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue3怎么使用element-plus的dialog文章都会有所收获,下面我们一起来看看吧。
优点
摆脱繁琐的 visible 的命名,以及反复的重复 dom。
想法
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) }
<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 去动态加载子组件
在app.vue中挂载
<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”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程之家行业资讯频道。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。