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

实现结果：

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

2. <template>
4.   <el-dialog class="my-dialog" v-model="isVisible" :show-close="false" :close-on-click-modal="false" :modal="false"
5.              modal-class="my-modal-class" :draggable="props.draggable">
6.     <template #header>
7.       <div class="my-header">
8.         {{ props.title }}
9.         <div style="cursor: pointer" @click="handleClose">
10.           <el-icon>
11.             <CloseBold/>
12.           </el-icon>
13.         </div>
14.       </div>
15.     </template>
16.     <div class="my-content">
17.       <slot name="content"/>
18.     </div>
19.   </el-dialog>
21. </template>
23. <script setup lang="ts">
25. import {ref} from "vue";
26. import {CloseBold} from "@element-plus/icons-vue";
28. const props = defineProps<{
29.   isVisible: boolean, // 是否显示
30.   title: string, // 标题
31.   draggable: boolean // 是否拖动
32. }>()
34. const isVisible = ref(props.isVisible)
36. const handleClose = () => {
37.   isVisible.value = false
38. }
40. </script>
42. <style lang="scss">
44. .my-dialog {
45.   pointer-events: auto; // 确保弹窗内的点击事件生效
46.   width: 400px;
47.   margin: 0;
48.   padding: 0;
49.   background: none;
50.   position: absolute;
51.   top: 300px;
52.   left: 500px;
54.   .el-dialog__header {
55.     padding-bottom: 0;
57.     .my-header {
58.       display: flex;
59.       justify-content: space-between;
60.       align-items: center;
61.       padding: 15px 30px;
62.       background: rgba(89, 123, 244);
63.       color: #FFFFFF;
64.     }
65.   }
67.   .my-content {
68.     background: #FFFFFF;
69.     padding: 15px 30px;
70.     font-size: 16px;
71.   }
72. }
74. .my-modal-class {
75.   pointer-events: none; // 保证遮罩下的区域点击事件生效
76. }
78. </style>

复制代码

 

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

2. <template>
4.   <custom-dialog v-bind="myDialog">
5.     <template #content>自定义内容</template>
6.   </custom-dialog>
8. </template>
10. <script setup lang="ts">
12. import CustomDialog from '@/components/CustomDialog/index.vue'
13. import {onMounted, ref} from "vue";
15. const myDialog = ref({
16.   isVisible: true,
17.   title: '二次封装el-dialog',
18.   draggable: true
19. })
21. </script>

复制代码