实现自定义封装Dialog弹窗组件（Vue3 + Element Plus）

封装自定义弹窗组件

CustomDialog.vue

<script setup lang="ts">

//定义props接口
interface IProps{
  isShow:boolean
}

//初始化props withDefaults、defineProps是编译器宏，无需引入
const props=withDefaults(defineProps<IProps>(),{
  isShow:false //是否展示
})

//定义发布事件 defineEmits是编译器宏，无需引入
const emit=defineEmits<{
  (e:'close'):void
}>()

//关闭弹窗
const closeDialog=()=>{
  emit('close')
}

</script>

<template>
  <el-dialog title="自定义弹窗" v-model="isShow" @close="closeDialog"></el-dialog>
</template>

<style>

</style>

父组件引入

Father.vue

<script setup lang="ts">
import CustomDialog from './components/CustomDialog.vue'
import {ref} from 'vue'

//自定义组件是否展示
const isShow=ref<boolean>(false)

//关闭回调
const closeCustomDialog=()=>{
  isShow.value=false
}

</script>

<template>
  <el-button @click="isShow=true">打开自定义弹窗</el-button>
  <CustomDialog :isShow="isShow" @close="closeCustomDialog" />
</template>

<style>

</style>

实现效果

点击打开弹框出现，关闭隐藏。