blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(Stepper): improve disable-input behavior

Browse Source
This commit is contained in:
陈嘉涵 2020-01-15 20:00:24 +08:00
parent 2f3ec6a3d4
commit 959eca136c
6 changed files with 34 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/stepper/README.md
View File

@ -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

8
src/stepper/README.zh-CN.md
View File

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

9
src/stepper/demo/index.vue
View File

@ -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
};
},

5
src/stepper/index.js
View File

@ -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}

8
src/stepper/test/__snapshots__/demo.spec.js.snap
View File

@ -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">

4
src/stepper/test/__snapshots__/index.spec.js.snap
View File

@ -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>`;