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

fix #3417
2025-04-05 19:41:45 +08:00 · 2021-02-19 14:29:00 +08:00 · 2021-02-19 14:29:00 +08:00 · c5b4858214
commit c5b4858214
parent a61f765260
6 changed files with 101 additions and 42 deletions
--- a/example/pages/stepper/index.wxml
+++ b/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" />
--- 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
--- 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 | 减号按钮 |
+
 ### 外部样式类

 | 类名         | 说明           |
--- 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;
--- 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);
    },
  },
--- a/packages/stepper/index.wxml
+++ b/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>