Переглянути джерело

fix(lead): 修复详情弹窗中表单验证错误提示的显示问题

yz 6 днів тому
батько
коміт
86bb6b0712
2 змінених файлів з 12 додано та 3 видалено
  1. 9 1
      src/views/lead/index.vue
  2. 3 2
      src/views/lead/mixins/leadIndex.js

+ 9 - 1
src/views/lead/index.vue

@@ -56,7 +56,8 @@
             width="80%"
             :close-on-click-modal="false"
             :destroy-on-close="true"
-            append-to-body>
+            append-to-body
+            custom-class="lead-detail-dialog">
             <div v-if="currentLead">
                 <div class="lead-info-flex" style="margin-bottom: 20px;">
                     <div class="info-row">
@@ -179,4 +180,11 @@ export default {
         margin: 0;
     }
 }
+
+// 仅在本组件的弹层内,修正 Element UI 错误提示的定位与显示,确保可见
+.lead-detail-dialog .el-form-item__error {
+    display: block !important;
+    position: static !important;
+    margin-top: 4px;
+}
 </style>

+ 3 - 2
src/views/lead/mixins/leadIndex.js

@@ -128,11 +128,12 @@ export default {
                         rules: [{
                             required: true,
                             message: '请输入详细信息内容',
-                            trigger: 'blur'
+                            trigger: ['blur', 'change']
                         }, {
+                            type: 'string',
                             min: 10,
                             message: '详细信息内容至少10个字符',
-                            trigger: 'blur'
+                            trigger: ['blur', 'change']
                         }],
                         overHidden: true,
                         width: 400