vue3 + ts + element-plus 二次封装 el-dialog

实现效果：

组件代码：注意 style 不能为 scoped

<template><el-dialog class="my-dialog" v-model="isVisible" :show-close="false" :close-on-click-modal="false" :modal="false"modal-class="my-modal-class" :draggable="props.draggable"><template #header><div class="my-header">{{ props.title }}<div style="cursor: pointer" @click="handleClose"><el-icon><CloseBold/></el-icon></div></div></template><div class="my-content"><slot name="content"/></div></el-dialog></template><script setup lang="ts">import {ref} from "vue";
import {CloseBold} from "@element-plus/icons-vue";const props = defineProps<{isVisible: boolean, // 是否显示title: string, // 标题draggable: boolean // 是否拖动
}>()const isVisible = ref(props.isVisible)const handleClose = () => {isVisible.value = false
}</script><style lang="scss">.my-dialog {pointer-events: auto; // 确保弹窗内的点击事件生效width: 400px;margin: 0;padding: 0;background: none;position: absolute;top: 300px;left: 500px;.el-dialog__header {padding-bottom: 0;.my-header {display: flex;justify-content: space-between;align-items: center;padding: 15px 30px;background: rgba(89, 123, 244);color: #FFFFFF;}}.my-content {background: #FFFFFF;padding: 15px 30px;font-size: 16px;}
}.my-modal-class {pointer-events: none; // 保证遮罩下的区域点击事件生效
}</style>

 

使用：v-bind 同时绑定多个属性

<template><custom-dialog v-bind="myDialog"><template #content>自定义内容</template></custom-dialog></template><script setup lang="ts">import CustomDialog from '@/components/CustomDialog/index.vue'
import {onMounted, ref} from "vue";const myDialog = ref({isVisible: true,title: '二次封装el-dialog',draggable: true
})</script>