vue3.0 element plus（记录–vue3优雅的使用element-plus的dialog）
导读：这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助...
这里给大家分享我在网上总结出来的一些知识 ，希望对大家有所帮助
如何优雅的基于 element-plus,封装一个梦中情 dialog
优点
摆脱繁琐的 visible 的命名 ，以及反复的重复 dom 。
想法
将 dialog 封装成一个函数就能唤起的组件 。如下：
效果图
基于 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, isNativeClose?: boolean) => {
dialogList.splice(i, 1)
if (!isNativeClose) 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"
@close="() => closeDialog(item, index, , true)"
>
<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 关闭弹窗的函数
在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>
附上代码
代码
本文转载于:
https://juejin.cn/post/7224007334514638903
如果对您有所帮助 ，欢迎您点个关注 ，我会定时更新技术文档 ，大家一起讨论学习 ，一起进步 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！