Vue3中结合ElementPlus实现弹窗的封装方式
作者：聂大哥
这篇文章主要介绍了Vue3中结合ElementPlus实现弹窗的封装方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
继上篇文章：Vue2中如何优雅的实现dialog的封装 ，再来一篇Vue3中的弹窗封装方式，我们要追逐新的技术，及时更新自己的知识库。
由于在Vue3中使用的UI是ElementPlus及关于Vue3的一些新特性，所以弹窗中的写法略有不同。例如控制弹窗显示的prop值不再是visible属性的值进行控制，而是改为了 v-model进行绑定变量进行使用；
弹窗的头部插槽、脚部插槽写法根据vue3的特性，写法不再是slot="footer"，而是改为v-slot:footer或#footer 并且只能绑定在template标签体或者自定义组件身上上。
弹窗组件的编写
<script setup lang="ts">
import { ref, defineEmits, defineExpose } from 'vue'
const emit = defineEmits(['confirmDia'])
let showDia = ref<boolean>(false)
const openDia = (): void => {
showDia.value = true
}
const closeDia = (): void => {
showDia.value = false
}
const confirmDia = (): void => {
emit('confirmDia', '弹窗内容事件处理完毕，信息传给父组件。')
}
// vue3中规定，使用了 <script setup> 的组件是默认私有的：
// 一个父组件无法访问到一个使用了 <script setup> 的子组件中的任何东西，除非子组件在其中通过 defineExpose 宏显式暴露
defineExpose({
openDia,
closeDia
})
</script><template>
<el-dialog
title="Dialog"
@close="closeDia"
v-model="showDia"
>
<template v-slot:footer>
<el-button @click="confirmDia" type="primary">确定</el-button>
<el-button @click="closeDia" type="primary" plain>取消</el-button>
</template>
</el-dialog>
</template>
父组件中使用弹窗组件
<script setup lang="ts">
import { ref } from 'vue';
import MyDialog from './components/MyDialog.vue'
// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
// 为了获取 MyDialog 的类型，我们首先需要通过 typeof 得到其类型，再使用 TypeScript 内置的 InstanceType 工具类型来获取其实例类型
let dialog = ref<InstanceType<typeof MyDialog> | null>(null)
const open = (): void => {
dialog.value?.openDia()
}
const confirmDia = (val: string): void => {
console.log(val)
dialog.value?.closeDia()
}
</script><template> <MyDialog ref="dialog" @confirmDia="confirmDia"/> <el-button @click="open" type="primary">打开弹窗</el-button> </template>
至此，Vue3中一个完整的自定义弹窗就完成了，具体的写法相比Vue2还是有些差别的。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。