⚡新增zr-dialog组件可以实现全屏dialog

src/assets/styles/element-ui.scss

@@ -128,7 +128,12 @@
     justify-content: space-between;
   }
 }
+
 // el-table 表头样式
 .el-table-header-cell {
   text-align: center !important;
 }
+
+.el-dialog__headerbtn {
+  width: 47px !important;
+}

src/components/Dialog/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <el-dialog
+    :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>
+        <span class="fullscreen" @click="handleScreen()">
+          <svg-icon :name="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" />
+        </span>
+      </div>
+    </template>
+
+    <slot></slot>
+
+    <template v-slot:footer>
+      <slot name="footer"> </slot>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  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(
+  () => props.modelValue,
+  (val) => {
+    open.value = val
+  },
+  { deep: true, immediate: true }
+)
+watch(
+  () => props.fullScreen,
+  (val) => {
+    isFullscreen.value = val
+  },
+  { deep: true, immediate: true }
+)
+
+const emit = defineEmits()
+function handleScreen() {
+  isFullscreen.value = !isFullscreen.value
+}
+function close() {
+  emit('close')
+}
+</script>
+<style>
+.custom-header {
+  position: relative;
+}
+.fullscreen {
+  position: absolute;
+  right: 13px;
+  top: 5px;
+  cursor: pointer;
+  width: 27px;
+  height: 27px;
+  text-align: center;
+}
+</style>

src/main.js

@@ -41,6 +41,8 @@ import ImagePreview from '@/components/ImagePreview'
 import DictTag from '@/components/DictTag'
 // el-date-picker 快捷选项
 import dateOptions from '@/utils/dateOptions'
+// Dialog组件
+import Dialog from '@/components/Dialog'
 
 const app = createApp(App)
 signalR.init(import.meta.env.VITE_APP_SOCKET_API)
@@ -65,6 +67,7 @@ app.component('UploadImage', ImageUpload)
 app.component('ImagePreview', ImagePreview)
 app.component('RightToolbar', RightToolbar)
 app.component('svg-icon', SvgIcon)
+app.component('ZrDialog', Dialog)
 
 directive(app)
 

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" />
 
     <!-- 添加或修改公告对话框 -->
-    <el-dialog :title="title" v-model="open" width="780px" append-to-body>
+    <zr-dialog :title="title" v-model="open" width="780px" @close="cancel" fullScreen>
       <el-form ref="noticeRef" :model="form" :rules="rules" label-width="80px">
         <el-row>
           <el-col :lg="24">
@@ -104,7 +104,7 @@
         <el-button text @click="cancel">{{ $t('btn.cancel') }}</el-button>
         <el-button type="primary" @click="submitForm">{{ $t('btn.submit') }}</el-button>
       </template>
-    </el-dialog>
+    </zr-dialog>
   </div>
 </template>