fix(input-number): 禁用时点击态不显示

jd-opensource · Aug 20, 2018 · 13d120c · 13d120c
1 parent 3d461af
commit 13d120c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/src/components/input-number/index.js b/src/components/input-number/index.js
@@ -70,8 +70,11 @@ class AtInputNumber extends Taro.Component {
       rootCls.push('at-input-number--lg')
     }
     return <View className={rootCls} >
-      <View className='at-input-number__btn' onClick={this.handleMinus.bind(this)}>
-        <AtIcon value='subtract' color={value <= min || disabled ? '#ccc' : '#6190e8'} size='18' />
+      <View
+        className={value <= min || disabled ? 'at-input-number__btn at-input-number--disabled' : 'at-input-number__btn'}
+        onClick={this.handleMinus.bind(this)}
+      >
+        <AtIcon value='subtract' size='18' />
       </View>
       <Input className='at-input-number__input'
         style={inputStyle}
@@ -80,8 +83,11 @@ class AtInputNumber extends Taro.Component {
         disabled={disabled}
         onInput={this.handleInput.bind(this)}
       />
-      <View className='at-input-number__btn' onClick={this.handlePlus.bind(this)}>
-        <AtIcon value='add' color={value >= max || disabled ? '#ccc' : '#6190e8'} size='18' />
+      <View
+        className={value >= max || disabled ? 'at-input-number__btn at-input-number--disabled' : 'at-input-number__btn'}
+        onClick={this.handlePlus.bind(this)}
+      >
+        <AtIcon value='add' size='18' />
       </View>
     </View>
   }

diff --git a/src/components/input-number/index.scss b/src/components/input-number/index.scss
@@ -21,9 +21,10 @@ $input-number-size-min-lg: 120px;
     align-items: center;
     justify-content: center;
     padding: $input-number-btn-padding;
-    font-size: $font-size-sm;
+    font-size: 0;
+    color: $color-brand;
     text-align: center;
-    line-height: 1;
+    line-height: $line-height-base;
     overflow: hidden;
     @include active;
   }
@@ -38,6 +39,14 @@ $input-number-size-min-lg: 120px;
     @include border-thin($width: 1PX, $directions: left right);
   }
 
+  &--disabled {
+    color: $color-text-disabled;
+
+    &:active {
+      background-color: inherit;
+    }
+  }
+
   &--lg {
     .at-input-number__btn {
       padding: $input-number-btn-padding-lg;