diff --git a/example/pages/overlay/index.wxss b/example/pages/overlay/index.wxss
new file mode 100644
index 00000000..70ef6a9d
--- /dev/null
+++ b/example/pages/overlay/index.wxss
@@ -0,0 +1 @@
+/* pages/overlay/index.wxss */
\ No newline at end of file
diff --git a/packages/stepper/README.md b/packages/stepper/README.md
index 94b4a7e8..913f2005 100644
--- a/packages/stepper/README.md
+++ b/packages/stepper/README.md
@@ -29,7 +29,7 @@ Page({
onChange(event) {
console.log(event.detail);
}
-})
+});
```
### 步长设置
@@ -69,11 +69,7 @@ Page({
如果需要异步地修改输入框的值,可以设置`async-change`属性,并在`change`事件中手动修改`value`
```html
-
+
```
```js
@@ -98,11 +94,7 @@ Page({
通过`input-width`属性设置输入框宽度,通过`button-size`属性设置按钮大小和输入框高度
```html
-
+
```
## API
@@ -110,36 +102,39 @@ Page({
### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|-----------|-----------|-----------|-------------|-------------|
-| name | 在表单内提交时的标识符 | *string* | - | - |
-| value | 输入值 | *string \| number* | 最小值 | - |
-| min | 最小值 | *string \| number* | `1` | - |
-| max | 最大值 | *string \| number* | - | - |
-| step | 步长 | *string \| number* | `1` | - |
-| integer | 是否只允许输入整数 | *boolean* | `false` | - |
-| disabled | 是否禁用 | *boolean* | `false` | - |
-| disable-input | 是否禁用输入框 | *boolean* | `false` | - |
-| async-change | 是否开启异步变更,开启后需要手动控制输入值 | *boolean* | `false` | - |
-| input-width | 输入框宽度,须指定单位 | *string* | `30px` | - |
-| show-plus | 是否显示增加按钮 | *boolean* | `true` | - |
-| show-minus | 是否显示减少按钮 | *boolean* | `true` | - |
+| --- | --- | --- | --- | --- |
+| name | 在表单内提交时的标识符 | _string_ | - | - |
+| value | 输入值 | _string \| number_ | 最小值 | - |
+| min | 最小值 | _string \| number_ | `1` | - |
+| max | 最大值 | _string \| number_ | - | - |
+| step | 步长 | _string \| number_ | `1` | - |
+| integer | 是否只允许输入整数 | _boolean_ | `false` | - |
+| disabled | 是否禁用 | _boolean_ | `false` | - |
+| disable-input | 是否禁用输入框 | _boolean_ | `false` | - |
+| async-change | 是否开启异步变更,开启后需要手动控制输入值 | _boolean_ | `false` | - |
+| input-width | 输入框宽度,默认单位为 `px` | _string \| number_ | `32px` | - |
+| button-size | 按钮大小,默认单位为 `px`,输入框高度会和按钮大小保持一致 | _string \| number_ | `28px` | - |
+| show-plus | 是否显示增加按钮 | _boolean_ | `true` | - |
+| show-minus | 是否显示减少按钮 | _boolean_ | `true` | - |
+
+ååå
### Events
-| 事件名 | 说明 | 回调参数 |
-|-----------|-----------|-----------|
-| bind:change | 当绑定值变化时触发的事件 | event.detail: 当前输入的值 |
-| bind:overlimit | 点击不可用的按钮时触发 | - |
-| bind:plus | 点击增加按钮时触发 | - |
-| bind:minus | 点击减少按钮时触发 | - |
-| bind:focus | 输入框聚焦时触发 | - |
-| bind:blur | 输入框失焦时触发 | - |
+| 事件名 | 说明 | 回调参数 |
+| -------------- | ------------------------ | -------------------------- |
+| bind:change | 当绑定值变化时触发的事件 | event.detail: 当前输入的值 |
+| bind:overlimit | 点击不可用的按钮时触发 | - |
+| bind:plus | 点击增加按钮时触发 | - |
+| bind:minus | 点击减少按钮时触发 | - |
+| bind:focus | 输入框聚焦时触发 | - |
+| bind:blur | 输入框失焦时触发 | - |
### 外部样式类
-| 类名 | 说明 |
-|-----------|-----------|
-| custom-class | 根节点样式类 |
-| input-class | 输入框样式类 |
-| plus-class | 加号按钮样式类 |
-| minus-class | 减号按钮样式类 |
+| 类名 | 说明 |
+| ------------ | -------------- |
+| custom-class | 根节点样式类 |
+| input-class | 输入框样式类 |
+| plus-class | 加号按钮样式类 |
+| minus-class | 减号按钮样式类 |
diff --git a/packages/stepper/index.less b/packages/stepper/index.less
index 0a9452a4..e13d36f5 100644
--- a/packages/stepper/index.less
+++ b/packages/stepper/index.less
@@ -70,9 +70,12 @@
&__input {
display: inline-block;
- box-sizing: content-box;
- width: 30px;
- height: 26px;
+ box-sizing: border-box;
+ // 覆盖 common style 中 input 的 min-height: 1.4rem;
+ // 避免 button-size 对 input 设置的 height 不生效
+ min-height: 0;
+ width: 32px;
+ height: 28px;
margin: 1px;
padding: 1px;
color: @text-color;
@@ -90,4 +93,4 @@
background-color: @stepper-input-disabled-color;
}
}
-}
+}
\ No newline at end of file
diff --git a/packages/stepper/index.ts b/packages/stepper/index.ts
index d077fe08..49b84716 100644
--- a/packages/stepper/index.ts
+++ b/packages/stepper/index.ts
@@ -1,20 +1,21 @@
import { VantComponent } from '../common/component';
import { Weapp } from 'definitions/weapp';
+import { addUnit } from '../common/utils';
+
+const LONG_PRESS_START_TIME = 600;
+const LONG_PRESS_INTERVAL = 200;
VantComponent({
field: true,
- classes: [
- 'input-class',
- 'plus-class',
- 'minus-class'
- ],
+ classes: ['input-class', 'plus-class', 'minus-class'],
props: {
value: null,
integer: Boolean,
disabled: Boolean,
- inputWidth: String,
+ inputWidth: null,
+ buttonSize: null,
asyncChange: Boolean,
disableInput: Boolean,
min: {
@@ -50,11 +51,26 @@ VantComponent({
if (typeof newValue === 'number' && +this.data.value !== newValue) {
this.setData({ value: newValue });
}
+ },
+
+ inputWidth() {
+ this.set({
+ inputStyle: this.computeInputStyle()
+ });
+ },
+
+ buttonSize() {
+ this.set({
+ inputStyle: this.computeInputStyle(),
+ buttonStyle: this.computeButtonStyle()
+ });
}
},
data: {
- focus: false
+ focus: false,
+ inputStyle: '',
+ buttonStyle: ''
},
created() {
@@ -93,7 +109,8 @@ VantComponent({
this.triggerInput(value);
},
- onChange(type: string) {
+ onChange() {
+ const { type } = this;
if (this.isDisabled(type)) {
this.$emit('overlimit', type);
return;
@@ -105,12 +122,35 @@ VantComponent({
this.$emit(type);
},
- onMinus() {
- this.onChange('minus');
+ longPressStep() {
+ this.longPressTimer = setTimeout(() => {
+ this.onChange();
+ this.longPressStep();
+ }, LONG_PRESS_INTERVAL);
},
- onPlus() {
- this.onChange('plus');
+ onTap(event: Weapp.Event) {
+ const { type } = event.currentTarget.dataset;
+ this.type = type;
+ this.onChange();
+ },
+
+ onTouchStart(event: Weapp.Event) {
+ clearTimeout(this.longPressTimer);
+
+ const { type } = event.currentTarget.dataset;
+ this.type = type;
+ this.isLongPress = false;
+
+ this.longPressTimer = setTimeout(() => {
+ this.isLongPress = true;
+ this.onChange();
+ this.longPressStep();
+ }, LONG_PRESS_START_TIME);
+ },
+
+ onTouchEnd() {
+ clearTimeout(this.longPressTimer);
},
triggerInput(value: string) {
@@ -118,6 +158,31 @@ VantComponent({
value: this.data.asyncChange ? this.data.value : value
});
this.$emit('change', value);
+ },
+
+ computeInputStyle() {
+ let style = '';
+
+ if (this.data.inputWidth) {
+ style = `width: ${addUnit(this.data.inputWidth)};`;
+ }
+
+ if (this.data.buttonSize) {
+ style += `height: ${addUnit(this.data.buttonSize)};`;
+ }
+
+ return style;
+ },
+
+ computeButtonStyle() {
+ let style = '';
+ const size = addUnit(this.data.buttonSize);
+
+ if (this.data.buttonSize) {
+ style = `width: ${size};height: ${size};`;
+ }
+
+ return style;
}
}
});
diff --git a/packages/stepper/index.wxml b/packages/stepper/index.wxml
index 1064208f..06480dc0 100644
--- a/packages/stepper/index.wxml
+++ b/packages/stepper/index.wxml
@@ -2,16 +2,20 @@