Skip to content

Commit 68d62f8

Browse files
chenjiahanchenjiahan
authored
[new feature] Stepper: add button-size prop (youzan#3714)
1 parent e901a52 commit 68d62f8

5 files changed

Lines changed: 78 additions & 5 deletions

File tree

‎src/stepper/README.md‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,16 @@ export default {
8181
}
8282
```
8383

84+
### Custom Size
85+
86+
```html
87+
<van-stepper
88+
v-model="value"
89+
input-width="40px"
90+
button-size="32px"
91+
/>
92+
```
93+
8494
## API
8595

8696
### Props
@@ -95,7 +105,8 @@ export default {
95105
| disabled | Disable value change | `Boolean` | `false` |
96106
| disable-input | Disable input | `Boolean` | `false` |
97107
| async-change | Whether to enable async change | `Boolean` | `false` | - |
98-
| input-width | Input width | `String | Number` | `30px` |
108+
| input-width | Input width | `String | Number` | `32px` |
109+
| button-size | Button size | `String | Number` | `28px` |
99110

100111
### Events
101112

‎src/stepper/README.zh-CN.md‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,18 @@ export default {
8383
}
8484
```
8585

86+
### 自定义大小
87+
88+
通过`input-width`属性设置输入框宽度，通过`button-size`属性设置按钮大小和输入框高度
89+
90+
```html
91+
<van-stepper
92+
v-model="value"
93+
input-width="40px"
94+
button-size="32px"
95+
/>
96+
```
97+
8698
## API
8799

88100
### Props
@@ -97,7 +109,8 @@ export default {
97109
| disabled | 是否禁用步进器 | `Boolean` | `false` | - |
98110
| disable-input | 是否禁用输入框 | `Boolean` | `false` | - |
99111
| async-change | 是否开启异步变更，开启后需要手动控制输入值 | `Boolean` | `false` | - |
100-
| input-width | 输入框宽度，默认单位为`px` | `String | Number` | `30px` | 1.6.13 |
112+
| input-width | 输入框宽度，默认单位为`px` | `String | Number` | `32px` | 1.6.13 |
113+
| button-size | 按钮大小，默认单位为`px`，输入框高度会和按钮大小保持一致 | `String | Number` | `28px` | 2.0.5 |
101114

102115
### Events
103116

‎src/stepper/demo/index.vue‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,17 @@
5858
@change="onChange"
5959
/>
6060
</van-cell>
61+
62+
<van-cell
63+
center
64+
:title="$t('customSize')"
65+
>
66+
<van-stepper
67+
v-model="stepper7"
68+
button-size="32px"
69+
input-width="40px"
70+
/>
71+
</van-cell>
6172
</demo-section>
6273
</template>
6374

@@ -68,13 +79,15 @@ export default {
6879
step: '步长设置',
6980
range: '限制输入范围',
7081
integer: '限制输入整数',
71-
asyncChange: '异步变更'
82+
asyncChange: '异步变更',
83+
customSize: '自定义大小'
7284
},
7385
'en-US': {
7486
step: 'Step',
7587
range: 'Range',
7688
integer: 'Integer',
7789
asyncChange: 'Async Change',
90+
customSize: 'Custom Size'
7891
}
7992
},
8093
@@ -85,7 +98,8 @@ export default {
8598
stepper3: 1,
8699
stepper4: 1,
87100
stepper5: 1,
88-
stepper6: 1
101+
stepper6: 1,
102+
stepper7: 1
89103
};
90104
},
91105

‎src/stepper/index.js‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export default createComponent({
1111
integer: Boolean,
1212
disabled: Boolean,
1313
inputWidth: [String, Number],
14+
buttonSize: [String, Number],
1415
asyncChange: Boolean,
1516
disableInput: Boolean,
1617
min: {
@@ -49,6 +50,32 @@ export default createComponent({
4950

5051
plusDisabled() {
5152
return this.disabled || this.currentValue >= this.max;
53+
},
54+
55+
inputStyle() {
56+
const style = {};
57+
58+
if (this.inputWidth) {
59+
style.width = suffixPx(this.inputWidth);
60+
}
61+
62+
if (this.buttonSize) {
63+
style.height = suffixPx(this.buttonSize);
64+
}
65+
66+
return style;
67+
},
68+
69+
buttonStyle() {
70+
const style = {};
71+
72+
if (this.buttonSize) {
73+
const size = suffixPx(this.buttonSize);
74+
style.width = size;
75+
style.height = size;
76+
}
77+
78+
return style;
5279
}
5380
},
5481

@@ -174,6 +201,7 @@ export default createComponent({
174201
return (
175202
<div class={bem()}>
176203
<button
204+
style={this.buttonStyle}
177205
class={bem('minus', { disabled: this.minusDisabled })}
178206
{...createListeners('minus')}
179207
/>
@@ -186,12 +214,13 @@ export default createComponent({
186214
aria-valuemin={this.min}
187215
aria-valuenow={this.currentValue}
188216
disabled={this.disabled || this.disableInput}
189-
style={{ width: suffixPx(this.inputWidth) }}
217+
style={this.inputStyle}
190218
onInput={this.onInput}
191219
onFocus={this.onFocus}
192220
onBlur={this.onBlur}
193221
/>
194222
<button
223+
style={this.buttonStyle}
195224
class={bem('plus', { disabled: this.plusDisabled })}
196225
{...createListeners('plus')}
197226
/>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,5 +38,11 @@ exports[`renders demo correctly 1`] = `
3838
<div class="van-stepper"><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"><button class="van-stepper__plus"></button></div>
3939
</div>
4040
</div>
41+
<div class="van-cell van-cell--center">
42+
<div class="van-cell__title"><span>自定义大小</span></div>
43+
<div class="van-cell__value">
44+
<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled" style="width: 32px; height: 32px;"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="width: 40px; height: 32px;"><button class="van-stepper__plus" style="width: 32px; height: 32px;"></button></div>
45+
</div>
46+
</div>
4147
</div>
4248
`;

0 commit comments

Comments
 (0)