fix: input-number 修复 form 校验不通过时，边框变红问题 (#148)

* fix: input-number 修复 form 校验不通过时，边框变红问题 * fix: time-picker form 表单校验失败红框显示问题
WeBankFinTech · May 12, 2022 · a3b602c · a3b602c
1 parent 081fb7c
commit a3b602c
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 15 deletions.
diff --git a/components/input-number/input-number.vue b/components/input-number/input-number.vue
@@ -5,6 +5,7 @@
             :disabled="disabled"
             :placeholder="placeholder"
             :class="[`${prefixCls}-inner`]"
+            :innerIsError="isError"
             @input="handleInput"
             @focus="(event) => $emit('focus', event)"
             @blur="handleBlur"
@@ -221,6 +222,7 @@ export default defineComponent({
 
         return {
             prefixCls,
+            isError,
             ActionEnum,
 
             classes,

diff --git a/components/input-number/style/index.less b/components/input-number/style/index.less
@@ -2,9 +2,10 @@
 @import '../../style/mixins/index';
 @import './mixin.less';
 
-@input-prefix-cls: ~'@{cls-prefix}-input-number';
+@input-number-prefix-cls: ~'@{cls-prefix}-input-number';
+@input-prefix-cls: ~'@{cls-prefix}-input';
 
-.@{input-prefix-cls} {
+.@{input-number-prefix-cls} {
     position: relative;
     display: inline-block;
     width: 130px;

diff --git a/components/input/input.vue b/components/input/input.vue
@@ -17,6 +17,7 @@
                 :showPassword="showPassword"
                 :inputStyle="inputStyle"
                 :autocomplete="autocomplete"
+                :innerIsError="isError"
                 @input="handleInput"
                 @change="handleChange"
                 @focus="handleFocus"
@@ -247,6 +248,7 @@ export default defineComponent({
         };
 
         return {
+            isError,
             inputRef,
             textareaRef,
             prefixCls,

diff --git a/components/input/inputInner.vue b/components/input/inputInner.vue
@@ -5,6 +5,7 @@
             prefixCls,
             (focused || innerIsFocus) && `${prefixCls}-focus`,
             disabled && `${prefixCls}-disabled`,
+            innerIsError && `${prefixCls}-error`,
         ]"
         @mousedown="handleMousedown"
         @mouseenter="onMouseEnter"
@@ -82,10 +83,8 @@ import type { InputValue } from './interface';
 const inputInnerProps = {
     ...commonInputProps,
     // 内部使用，处理页面存在多个 input focus 样式场景
-    innerIsFocus: {
-        type: Boolean,
-        default: false,
-    },
+    innerIsFocus: Boolean,
+    innerIsError: Boolean,
 } as const;
 
 const prefixCls = getPrefixCls('input-inner');

diff --git a/components/input/style/index.less b/components/input/style/index.less
@@ -17,15 +17,6 @@
     width: 100%;
     vertical-align: middle;
     .text();
-    &.is-error {
-        .@{input-prefix-cls}-inner:not(.@{input-prefix-cls}-inner-disabled) {
-            border-color: var(--f-danger-color);
-        }
-        .@{input-prefix-cls}-inner-focus:not(.@{input-prefix-cls}-inner-disabled) {
-            border-color: var(--f-danger-color);
-            box-shadow: 0 0 0 2px var(--f-focus-danger-shadow-color);
-        }
-    }
     &-prepend {
         .group();
         .group-prepend();

diff --git a/components/input/style/inputInner.less b/components/input/style/inputInner.less
@@ -29,6 +29,16 @@
         .disabled();
     }
 
+    &&-error {
+        &:not(.@{input-inner-prefix-cls}-disabled) {
+            border-color: var(--f-danger-color);
+        }
+        &.@{input-inner-prefix-cls}-focus {
+            border-color: var(--f-danger-color);
+            box-shadow: 0 0 0 2px var(--f-focus-danger-shadow-color);
+        }
+    }
+
     &-el {
         position: relative;
         box-sizing: border-box;

diff --git a/components/time-picker/time-picker.vue b/components/time-picker/time-picker.vue
@@ -19,6 +19,7 @@
                 :placeholder="inputPlaceholder"
                 :disabled="disabled"
                 :clearable="clearable"
+                :innerIsError="isError"
                 @clear="clear"
                 @input="handleInput"
                 @focus="(event) => $emit('focus', event)"
@@ -319,6 +320,7 @@ export default defineComponent({
 
         return {
             prefixCls,
+            isError,
             classes,
             displayValue,
             isOpened,