⚡优化组件zr-dialog

src/components/Dialog/index.vue

@@ -1,13 +1,5 @@
 <template>
-  <el-dialog
+  <el-dialog v-bind="$attrs" :fullscreen="isFullscreen" ref="myDialogRef" v-model="open">
-    :width="width"
-    :title="title"
-    :lock-scroll="false"
-    v-model="open"
-    :lockScroll="lockScroll"
-    :fullscreen="isFullscreen"
-    :draggable="draggable"
-    @closed="close">
     <template #header="{ close, titleId, titleClass }">
       <div class="custom-header">
         <span :id="titleId" :class="titleClass">{{ title }}</span>
@@ -16,9 +8,7 @@
         </span>
       </div>
     </template>
-
     <slot></slot>
-
     <template v-slot:footer>
       <slot name="footer"> </slot>
     </template>
@@ -34,24 +24,11 @@ const props = defineProps({
   title: {
     type: String
   },
-  width: {
-    type: [Number, String],
-    default: 0
-  },
   fullScreen: {
     type: Boolean,
     default: false
-  },
-  draggable: {
-    type: Boolean,
-    default: false
-  },
-  lockScroll: {
-    type: Boolean,
-    default: true
   }
 })
-
 const isFullscreen = ref(false)
 const open = ref(false)
 watch(
@@ -69,13 +46,18 @@ watch(
   { deep: true, immediate: true }
 )
 
-const emit = defineEmits()
 function handleScreen() {
   isFullscreen.value = !isFullscreen.value
 }
-function close() {
+const expose = {}
-  emit('close')
+const myDialogRef = ref()
-}
+onMounted(() => {
+  const entries = Object.entries(myDialogRef.value)
+  for (const [method, fn] of entries) {
+    expose[method] = fn
+  }
+})
+defineExpose(expose)
 </script>
 <style>
 .custom-header {

src/views/system/notice/index.vue

@@ -68,7 +68,7 @@
     <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
 
     <!-- 添加或修改公告对话框 -->
-    <zr-dialog :title="title" v-model="open" width="780px" @close="cancel" fullScreen>
+    <zr-dialog :title="title" draggable v-model="open" width="580px">
       <el-form ref="noticeRef" :model="form" :rules="rules" label-width="80px">
         <el-row>
           <el-col :lg="24">