Просмотр исходного кода

fix: 彻底修复维修分类界面弹窗关闭按钮显示问题

- 为两个弹窗添加 :show-close="true" 强制显示关闭按钮
- 为两个弹窗添加 :close-on-click-modal="false" 禁用点击遮罩关闭
- 为两个弹窗添加 class="repair-category-dialog" 用于样式控制
- 添加专门的CSS样式强制显示关闭按钮,确保不被其他样式覆盖
- 使用 :deep() 穿透样式,确保对话框头部按钮和关闭按钮正常显示

解决方案:
1. 显式设置 show-close 属性为 true
2. 通过CSS强制设置 display: block、visibility: visible、opacity: 1
3. 确保关闭按钮颜色使用 --art-gray-500 变量

问题: 新增/修改维修类型弹窗和查看详情弹窗的右上角关闭按钮不显示
修复: 多重保障确保关闭按钮正常显示
zlwu 1 год назад
Родитель
Сommit
18c374d66b
1 измененных файлов с 36 добавлено и 2 удалено
  1. 36 2
      web/src/views/hq/pm/repairCategory/index.vue

+ 36 - 2
web/src/views/hq/pm/repairCategory/index.vue

@@ -123,7 +123,15 @@
     </el-card>
 
     <!-- 添加或修改维修类型对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="800px" append-to-body :show-close="true">
+    <el-dialog
+      :title="dialog.title"
+      v-model="dialog.visible"
+      width="800px"
+      append-to-body
+      :show-close="true"
+      :close-on-click-modal="false"
+      class="repair-category-dialog"
+    >
       <el-form ref="categoryFormRef" :model="form" :rules="rules" label-width="120px">
         <el-row :gutter="20">
           <el-col :span="12">
@@ -210,7 +218,15 @@
     </el-dialog>
 
     <!-- 查看维修类型详情对话框 -->
-    <el-dialog title="维修类型详情" v-model="viewDialog.visible" width="800px" append-to-body :show-close="true">
+    <el-dialog
+      title="维修类型详情"
+      v-model="viewDialog.visible"
+      width="800px"
+      append-to-body
+      :show-close="true"
+      :close-on-click-modal="false"
+      class="repair-category-dialog"
+    >
       <div v-if="viewData" class="category-detail">
         <el-descriptions :column="2" border>
           <el-descriptions-item label="类型名称">
@@ -670,6 +686,24 @@ onMounted(() => {
 });
 </script>
 
+<style lang="scss" scoped>
+// 强制显示关闭按钮
+.repair-category-dialog {
+  :deep(.el-dialog__headerbtn) {
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+  }
+
+  :deep(.el-dialog__close) {
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+    color: var(--art-gray-500) !important;
+  }
+}
+</style>
+
 <style lang="scss" scoped>
 .page-container {
   .table-container {