fix(ui/counter ui/input ui/select): 修复counter移动端长按touchend失效的问题，修复inp…

…ut select颜色显示的问题 affects: @varlet/ui
varletjs · Apr 19, 2021 · a0e6f6a · a0e6f6a
1 parent bb1a33c
commit a0e6f6a
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/packages/varlet-ui/src/counter/Counter.vue b/packages/varlet-ui/src/counter/Counter.vue
@@ -21,6 +21,7 @@
         @click="decrement"
         @touchstart="pressDecrement"
         @touchend="releaseDecrement"
+        @touchcancel="releaseDecrement"
       />
       <input
         class="var-counter__input"
@@ -49,6 +50,7 @@
         @click="increment"
         @touchstart="pressIncrement"
         @touchend="releaseIncrement"
+        @touchcancel="releaseIncrement"
       />
     </div>
 
@@ -70,7 +72,7 @@ import { useForm } from '../form/provide'
 import { useValidation } from '../utils/components'
 
 const SPEED = 100
-const DELAY = 400
+const DELAY = 600
 
 export default defineComponent({
   name: 'VarCounter',

diff --git a/packages/varlet-ui/src/input/Input.vue b/packages/varlet-ui/src/input/Input.vue
@@ -13,7 +13,7 @@
         formDisabled || disabled ? 'var-input--disabled' : null,
       ]"
       :style="{
-        color: isFocus ? focusColor : blurColor,
+        color: !errorMessage ? (isFocus ? focusColor : blurColor) : null,
       }"
     >
       <div class="var-input__icon" :class="[!hint ? 'var-input--non-hint' : null]">
@@ -60,7 +60,7 @@
             formDisabled || disabled ? 'var-input--line-disabled' : null,
             errorMessage ? 'var-input--line-error' : null,
           ]"
-          :style="{ background: blurColor }"
+          :style="{ background: !errorMessage ? blurColor : null }"
           v-if="line"
         >
           <div
@@ -70,7 +70,7 @@
               formDisabled || disabled ? 'var-input--line-disabled' : null,
               errorMessage ? 'var-input--line-error' : null,
             ]"
-            :style="{ background: focusColor }"
+            :style="{ background: !errorMessage ? focusColor : null }"
           ></div>
         </div>
       </div>

diff --git a/packages/varlet-ui/src/select/Select.vue b/packages/varlet-ui/src/select/Select.vue
@@ -13,7 +13,7 @@
         formDisabled || disabled ? 'var-select--disabled' : null,
       ]"
       :style="{
-        color: isFocus ? focusColor : blurColor,
+        color: !errorMessage ? (isFocus ? focusColor : blurColor) : null,
       }"
     >
       <div class="var-select__icon" :class="[!hint ? 'var-select--non-hint' : null]">
@@ -81,7 +81,7 @@
               formDisabled || disabled ? 'var-select--line-disabled' : null,
               errorMessage ? 'var-select--line-error' : null,
             ]"
-            :style="{ background: blurColor }"
+            :style="{ background: !errorMessage ? blurColor : null }"
             v-if="line"
           >
             <div
@@ -91,7 +91,7 @@
                 formDisabled || disabled ? 'var-select--line-disabled' : null,
                 errorMessage ? 'var-select--line-error' : null,
               ]"
-              :style="{ background: focusColor }"
+              :style="{ background: !errorMessage ? focusColor : null }"
             ></div>
           </div>
         </div>