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 变量 问题: 新增/修改维修类型弹窗和查看详情弹窗的右上角关闭按钮不显示 修复: 多重保障确保关闭按钮正常显示
This commit is contained in:
1 parent
45ecab1c70
commit
18c374d66b
1 file changed
+36
-2
@@ -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 {
|
||||
|
||||
Reference in new issue
Block a user