feat(stepper): add new prop theme & add new slot (#4049)

fix #3417

example/pages/stepper/index.wxml

@@ -38,4 +38,8 @@
   <van-stepper value="{{ 1 }}" input-width="40px" button-size="32px" />
 </van-cell>
 
+<van-cell center title="圆角风格">
+  <van-stepper value="{{ 1 }}" theme="round" button-size="22px" />
+</van-cell>
+
 <van-toast id="van-toast" />

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

packages/stepper/README.md

@@ -117,25 +117,26 @@ Page({
 
 ### Props
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- | --- |
+| --- | --- | --- | --- |
-| name | 在表单内提交时的标识符 | _string_ | - | - |
+| name | 在表单内提交时的标识符 | _string_ | - |
-| value | 输入值 | _string \| number_ | 最小值 | - |
+| value | 输入值 | _string \| number_ | 最小值 |
-| min | 最小值 | _string \| number_ | `1` | - |
+| min | 最小值 | _string \| number_ | `1` |
-| max | 最大值 | _string \| number_ | - | - |
+| max | 最大值 | _string \| number_ | - |
-| step | 步长 | _string \| number_ | `1` | - |
+| step | 步长 | _string \| number_ | `1` |
-| integer | 是否只允许输入整数 | _boolean_ | `false` | - |
+| integer | 是否只允许输入整数 | _boolean_ | `false` |
-| disabled | 是否禁用 | _boolean_ | `false` | - |
+| disabled | 是否禁用 | _boolean_ | `false` |
-| disable-input | 是否禁用输入框 | _boolean_ | `false` | - |
+| disable-input | 是否禁用输入框 | _boolean_ | `false` |
-| async-change | 是否开启异步变更，开启后需要手动控制输入值 | _boolean_ | `false` | - |
+| async-change | 是否开启异步变更，开启后需要手动控制输入值 | _boolean_ | `false` |
-| input-width | 输入框宽度，默认单位为 `px` | _string \| number_ | `32px` | - |
+| input-width | 输入框宽度，默认单位为 `px` | _string \| number_ | `32px` |
-| button-size | 按钮大小，默认单位为 `px`，输入框高度会和按钮大小保持一致 | _string \| number_ | `28px` | - |
+| button-size | 按钮大小，默认单位为 `px`，输入框高度会和按钮大小保持一致 | _string \| number_ | `28px` |
-| show-plus | 是否显示增加按钮 | _boolean_ | `true` | - |
+| show-plus | 是否显示增加按钮 | _boolean_ | `true` |
-| show-minus | 是否显示减少按钮 | _boolean_ | `true` | - |
+| show-minus | 是否显示减少按钮 | _boolean_ | `true` |
-| decimal-length | 固定显示的小数位数 | _number_ | - | - |
+| decimal-length | 固定显示的小数位数 | _number_ | - |
-| disable-plus | 是否禁用增加按钮 | _boolean_ | - | - |
+| theme | 样式风格，可选值为 `round` | _string_ | - |
-| disable-minus | 是否禁用减少按钮 | _boolean_ | - | - |
+| disable-plus | 是否禁用增加按钮 | _boolean_ | - |
-| long-press | 是否开启长按手势 | _boolean_ | `true` | - |
+| disable-minus | 是否禁用减少按钮 | _boolean_ | - |
+| long-press | 是否开启长按手势 | _boolean_ | `true` |
 
 ### Events
 
@@ -148,6 +149,13 @@ Page({
 | bind:focus     | 输入框聚焦时触发         | -                          |
 | bind:blur      | 输入框失焦时触发         | -                          |
 
+### Slot
+
+| 名称  | 说明     |
+| ----- | -------- |
+| plus  | 加号按钮 |
+| minus | 减号按钮 |
+
 ### 外部样式类
 
 | 类名         | 说明           |

packages/stepper/index.less

@@ -28,8 +28,8 @@
       height: 9px;
     }
 
-    &::before,
+    &:empty&::before,
-    &::after {
+    &: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;

packages/stepper/index.ts

@@ -22,11 +22,7 @@ VantComponent({
   props: {
     value: {
       type: null,
-      observer(value) {
+      observer: 'observeValue',
-        if (!equal(value, this.data.currentValue)) {
-          this.setData({ currentValue: this.format(value) });
-        }
-      },
     },
     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 (
+        return disabled || disablePlus || currentValue >= max;
-          this.data.disabled ||
-          this.data.disablePlus ||
-          this.data.currentValue >= this.data.max
-        );
       }
 
-      return (
+      return disabled || disableMinus || currentValue <= min;
-        this.data.disabled ||
-        this.data.disableMinus ||
-        this.data.currentValue <= this.data.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);
     },
   },

packages/stepper/index.wxml

@@ -1,7 +1,7 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 <wxs src="./index.wxs" module="computed" />
 
-<view class="van-stepper custom-class">
+<view class="{{ utils.bem('stepper', [theme]) }} custom-class">
   <view
     wx:if="{{ showMinus }}"
     data-type="minus"
@@ -12,7 +12,9 @@
     bind:tap="onTap"
     bind:touchstart="onTouchStart"
     bind:touchend="onTouchEnd"
-  />
+  >
+    <slot name="plus" />
+  </view>
   <input
     type="{{ integer ? 'number' : 'digit' }}"
     class="input-class {{ utils.bem('stepper__input', { disabled: disabled || disableInput }) }}"
@@ -34,5 +36,7 @@
     bind:tap="onTap"
     bind:touchstart="onTouchStart"
     bind:touchend="onTouchEnd"
-  />
+  >
+    <slot name="minus" />
+  </view>
 </view>