feat(Stepper): improve disable-input behavior

src/stepper/README.md

@@ -51,6 +51,12 @@ export default {
 <van-stepper v-model="value" disabled />
 ```
 
+### Disable Input
+
+```html
+<van-stepper v-model="value" disabled-input />
+```
+
 ### Decimal Length
 
 ```html

src/stepper/README.zh-CN.md

@@ -65,6 +65,14 @@ export default {
 <van-stepper v-model="value" disabled />
 ```
 
+### 禁用输入框
+
+通过设置`disabled-input`属性来禁用输入框，此时按钮仍然可以点击
+
+```html
+<van-stepper v-model="value" disabled-input />
+```
+
 ### 固定小数位数
 
 通过设置`decimal-length`属性可以保留固定的小数位数

src/stepper/demo/index.vue

@@ -20,6 +20,10 @@
       <van-stepper v-model="stepper5" disabled />
     </van-cell>
 
+    <van-cell center :title="$t('disableInput')">
+      <van-stepper v-model="disabledInput" disable-input />
+    </van-cell>
+
     <van-cell center :title="$t('decimalLength')">
       <van-stepper v-model="stepper8" :decimal-length="1" step="0.2" />
     </van-cell>
@@ -43,6 +47,7 @@ export default {
       integer: '限制输入整数',
       asyncChange: '异步变更',
       customSize: '自定义大小',
+      disableInput: '禁用输入框',
       decimalLength: '固定小数位数'
     },
     'en-US': {
@@ -51,6 +56,7 @@ export default {
       integer: 'Integer',
       asyncChange: 'Async Change',
       customSize: 'Custom Size',
+      disableInput: 'Disable Input',
       decimalLength: 'Decimal Length'
     }
   },
@@ -64,7 +70,8 @@ export default {
       stepper5: 1,
       stepper6: 1,
       stepper7: 1,
-      stepper8: 1
+      stepper8: 1,
+      disabledInput: 1
     };
   },
 

src/stepper/index.js

@@ -289,11 +289,12 @@ export default createComponent({
           role="spinbutton"
           class={bem('input')}
           value={this.currentValue}
+          style={this.inputStyle}
+          disabled={this.disabled}
+          readonly={this.disableInput}
           aria-valuemax={this.max}
           aria-valuemin={this.min}
           aria-valuenow={this.currentValue}
-          disabled={this.disabled || this.disableInput}
-          style={this.inputStyle}
           onInput={this.onInput}
           onFocus={this.onFocus}
           onBlur={this.onBlur}

src/stepper/test/__snapshots__/demo.spec.js.snap

@@ -29,7 +29,13 @@ exports[`renders demo correctly 1`] = `
   <div class="van-cell van-cell--center">
     <div class="van-cell__title"><span>禁用状态</span></div>
     <div class="van-cell__value">
-      <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" disabled="disabled" class="van-stepper__input"><button type="button" class="van-stepper__plus van-stepper__plus--disabled"></button></div>
+      <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" disabled="disabled" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus van-stepper__plus--disabled"></button></div>
+    </div>
+  </div>
+  <div class="van-cell van-cell--center">
+    <div class="van-cell__title"><span>禁用输入框</span></div>
+    <div class="van-cell__value">
+      <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" readonly="readonly" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
     </div>
   </div>
   <div class="van-cell van-cell--center">

src/stepper/test/__snapshots__/index.spec.js.snap

@@ -2,9 +2,9 @@
 
 exports[`button-size prop 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled" style="width: 2rem; height: 2rem;"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="height: 2rem;"><button type="button" class="van-stepper__plus" style="width: 2rem; height: 2rem;"></button></div>`;
 
-exports[`disable stepper input 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" disabled="disabled" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>`;
+exports[`disable stepper input 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" readonly="readonly" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>`;
 
-exports[`disabled stepper 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" disabled="disabled" class="van-stepper__input"><button type="button" class="van-stepper__plus van-stepper__plus--disabled"></button></div>`;
+exports[`disabled stepper 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" disabled="disabled" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus van-stepper__plus--disabled"></button></div>`;
 
 exports[`input-width prop 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="width: 10rem;"><button type="button" class="van-stepper__plus"></button></div>`;