diff --git a/example/pages/stepper/index.wxml b/example/pages/stepper/index.wxml
index 417bd361..7d3d3de3 100644
--- a/example/pages/stepper/index.wxml
+++ b/example/pages/stepper/index.wxml
@@ -38,4 +38,8 @@
+
+
+
+
diff --git a/packages/common/style/var.less b/packages/common/style/var.less
index 16c6a531..0ef2d169 100644
--- a/packages/common/style/var.less
+++ b/packages/common/style/var.less
@@ -474,16 +474,18 @@
// Stepper
@stepper-active-color: #e8e8e8;
-@stepper-background-color: @gray-2;
+@stepper-background-color: @active-color;
@stepper-button-icon-color: @text-color;
-@stepper-button-disabled-color: @gray-1;
+@stepper-button-disabled-color: @background-color;
@stepper-button-disabled-icon-color: @gray-5;
+@stepper-button-round-theme-color: @red;
@stepper-input-width: 32px;
@stepper-input-height: 28px;
@stepper-input-font-size: @font-size-md;
+@stepper-input-line-height: normal;
@stepper-input-text-color: @text-color;
@stepper-input-disabled-text-color: @gray-5;
-@stepper-input-disabled-background-color: @gray-2;
+@stepper-input-disabled-background-color: @active-color;
@stepper-border-radius: @border-radius-md;
// SubmitBar
diff --git a/packages/stepper/README.md b/packages/stepper/README.md
index 20b5aaba..9cfe6bdf 100644
--- a/packages/stepper/README.md
+++ b/packages/stepper/README.md
@@ -117,25 +117,26 @@ 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 | 输入框宽度,默认单位为 `px` | _string \| number_ | `32px` | - |
-| button-size | 按钮大小,默认单位为 `px`,输入框高度会和按钮大小保持一致 | _string \| number_ | `28px` | - |
-| show-plus | 是否显示增加按钮 | _boolean_ | `true` | - |
-| show-minus | 是否显示减少按钮 | _boolean_ | `true` | - |
-| decimal-length | 固定显示的小数位数 | _number_ | - | - |
-| disable-plus | 是否禁用增加按钮 | _boolean_ | - | - |
-| disable-minus | 是否禁用减少按钮 | _boolean_ | - | - |
-| long-press | 是否开启长按手势 | _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` |
+| decimal-length | 固定显示的小数位数 | _number_ | - |
+| theme | 样式风格,可选值为 `round` | _string_ | - |
+| disable-plus | 是否禁用增加按钮 | _boolean_ | - |
+| disable-minus | 是否禁用减少按钮 | _boolean_ | - |
+| long-press | 是否开启长按手势 | _boolean_ | `true` |
### Events
@@ -148,6 +149,13 @@ Page({
| bind:focus | 输入框聚焦时触发 | - |
| bind:blur | 输入框失焦时触发 | - |
+### Slot
+
+| 名称 | 说明 |
+| ----- | -------- |
+| plus | 加号按钮 |
+| minus | 减号按钮 |
+
### 外部样式类
| 类名 | 说明 |
diff --git a/packages/stepper/index.less b/packages/stepper/index.less
index da0aa849..cbeb7ca5 100644
--- a/packages/stepper/index.less
+++ b/packages/stepper/index.less
@@ -28,8 +28,8 @@
height: 9px;
}
- &::before,
- &::after {
+ &:empty&::before,
+ &:empty&::after {
position: absolute;
top: 0;
right: 0;
@@ -66,6 +66,39 @@
.theme(border-radius, '0 @stepper-border-radius @stepper-border-radius 0');
}
+ &--round {
+ .van-stepper__input {
+ background-color: transparent !important;
+ }
+
+ .van-stepper__plus,
+ .van-stepper__minus {
+ border-radius: 100%;
+
+ &:active {
+ opacity: @active-opacity;
+ }
+
+ &--disabled {
+ &,
+ &:active {
+ opacity: 0.3;
+ }
+ }
+ }
+
+ .van-stepper__plus {
+ color: @white;
+ background-color: @stepper-button-round-theme-color;
+ }
+
+ .van-stepper__minus {
+ color: @stepper-button-round-theme-color;
+ background-color: @white;
+ border: 1px solid @stepper-button-round-theme-color;
+ }
+ }
+
&__input {
display: inline-block;
box-sizing: border-box;
diff --git a/packages/stepper/index.ts b/packages/stepper/index.ts
index 7d68c41e..abb157fb 100644
--- a/packages/stepper/index.ts
+++ b/packages/stepper/index.ts
@@ -22,11 +22,7 @@ VantComponent({
props: {
value: {
type: null,
- observer(value) {
- if (!equal(value, this.data.currentValue)) {
- this.setData({ currentValue: this.format(value) });
- }
- },
+ observer: 'observeValue',
},
integer: {
type: Boolean,
@@ -70,6 +66,7 @@ VantComponent({
type: Boolean,
value: true,
},
+ theme: String,
},
data: {
@@ -83,6 +80,14 @@ VantComponent({
},
methods: {
+ observeValue() {
+ const { value, currentValue } = this.data;
+
+ if (!equal(value, currentValue)) {
+ this.setData({ currentValue: this.format(value) });
+ }
+ },
+
check() {
const val = this.format(this.data.currentValue);
if (!equal(val, this.data.currentValue)) {
@@ -91,19 +96,20 @@ VantComponent({
},
isDisabled(type: string) {
+ const {
+ disabled,
+ disablePlus,
+ disableMinus,
+ currentValue,
+ max,
+ min,
+ } = this.data;
+
if (type === 'plus') {
- return (
- this.data.disabled ||
- this.data.disablePlus ||
- this.data.currentValue >= this.data.max
- );
+ return disabled || disablePlus || currentValue >= max;
}
- return (
- this.data.disabled ||
- this.data.disableMinus ||
- this.data.currentValue <= this.data.min
- );
+ return disabled || disableMinus || currentValue <= min;
},
onFocus(event: WechatMiniprogram.InputFocus) {
@@ -175,6 +181,7 @@ VantComponent({
onChange() {
const { type } = this;
+
if (this.isDisabled(type)) {
this.$emit('overlimit', type);
return;
@@ -222,6 +229,7 @@ VantComponent({
if (!this.data.longPress) {
return;
}
+
clearTimeout(this.longPressTimer);
},
},
diff --git a/packages/stepper/index.wxml b/packages/stepper/index.wxml
index eadee98c..b49140e5 100644
--- a/packages/stepper/index.wxml
+++ b/packages/stepper/index.wxml
@@ -1,7 +1,7 @@
-
+
+ >
+
+
+ >
+
+