使用vue3+ts针对element-plus里面的弹窗进行二次封装并且全局如何使用

该文章主要对 element-plus 里的 dialog 组件的二次封装，主要针对close-on-click-modal和close-on-press-escape的默认属性做了更改，其他的属性正常按照 dialog 组件的文档进行设置

1、首先在项目中下载elemnent-plus

    npm install element-plus --save

    # Yarn
    $ yarn add element-plus

    # pnpm
    $ pnpm install element-plus

2、在main.ts中进行注册

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App)
app.use(ElementPlus).use(store).use(router).mount('#app')

3、在components里面创建，并放入以下代码

<template>
  <el-dialog v-bind="$attrs" :close-on-click-modal="false" :close-on-press-escape="false" v-on="$attrs">
    <template #[slotName]="slotProps" v-for="(slot, slotName) in $slots">
      <slot :name="slotName" v-bind="slotProps" />
    </template>
  </el-dialog>
</template>

4、最后在main.ts文件进行注册即可使用

   // 二次封装element-plus的弹窗组件
   import AiDialog from '@/components/AiDialog/index.vue'
   //全局组件挂载
   app.component("AiDialog", AiDialog);

5、在对应要展示的页面进行使用即可

例子：

<template>
 <div class="home">
   <AiDialog v-model="createDialog" width="600px" :title="title">
     111
   </AiDialog>
   <el-button @click='createDialog=true'>确定</el-button>
 </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const createDialog = ref(false)
const title = ref('标题')
</script>

页面效果：

注意：当封装组件使用弹框进行多次点击时，有可能出现只有一次展示而后续不触发的情况，如下图点击详情时，第一次触发，后续不触发的问题如何解决：

由于我们打开弹框是状态设置为true,下一次点击时无法修改状态,我们可以借助弹框的@close事件使用defineEmits(['update:这是对应要修改的属性'])

//父
<!-- 详情弹框 -->
<DetailDialog v-model="createDialog"  />



//子组件
<AiDialog class="close" @close="close" :modelValue="modelValue" width="600px" title="详情">
       这是组件的内容
</AiDialog>
<script lang="ts" setup>
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    }
})
//使用以下方法可以进行解决
const emit = defineEmits(['update:modelValue'])
const close = () => {
    emit('update:modelValue', false)
}
</script>
<style lang='scss' scoped>
</style>