[improvement] Stepper: size support small middle large (#306)

example/pages/stepper/index.wxml

@@ -14,6 +14,7 @@
   <!-- small size -->
   <zan-panel title="不同尺寸-小尺寸类型">
     <view style="padding: 40px 15px">
+      <view style="margin-bottom: 5px">small:</view>
       <zan-stepper
         stepper="{{ stepper2.stepper }}"
         min="{{ stepper2.min }}"
@@ -21,8 +22,27 @@
         size="small"
         data-component-id="stepper2"
         bind:change="handleZanStepperChange"
-      >
-      </zan-stepper>
+
+      ></zan-stepper>
+
+      <view style="margin: 10px 0 5px;">middle:</view>
+      <zan-stepper
+        stepper="{{ stepper2.stepper }}"
+        min="{{ stepper2.min }}"
+        max="{{ stepper2.max }}"
+        data-component-id="stepper2-1"
+        bind:change="handleZanStepperChange"
+      ></zan-stepper>
+
+      <view style="margin: 10px 0 5px;">large:</view>
+      <zan-stepper
+        stepper="{{ stepper2.stepper }}"
+        min="{{ stepper2.min }}"
+        max="{{ stepper2.max }}"
+        size="large"
+        data-component-id="stepper2-2"
+        bind:change="handleZanStepperChange"
+      ></zan-stepper>
     </view>
   </zan-panel>
 

packages/stepper/README.md

@@ -24,7 +24,7 @@ Page({
       min: 1,
       // 最大可到的数字
       max: 1,
-      // 小尺寸, 默认大尺寸
+      // 尺寸
       size: 'small'
     }
   },
@@ -58,7 +58,7 @@ Page({
 
 | 参数       | 说明      | 类型       | 默认值       | 必须      |
 |-----------|-----------|-----------|-------------|-------------|
-| size | 计数器尺寸 | String | - | |
+| size | 计数器尺寸：small、middle、large | String | middle | |
 | stepper | 计数器的值 | Number | `1` | 必须 |
 | min | 计数器最小值 | Number | `1` | |
 | max | 计数器最大值 | Number | 无穷大 | |

packages/stepper/index.js

@@ -4,7 +4,10 @@ const VERY_LARGE_NUMBER = 2147483647;
 
 Component({
   properties: {
-    size: String,
+    size: {
+      type: String,
+      value: 'middle'
+    },
     stepper: {
       type: Number,
       value: 1
@@ -37,7 +40,7 @@ Component({
       } else if (type === 'plus') {
         stepper += step;
       }
-      
+
       if (stepper < this.data.min || stepper > this.data.max) return null;
 
       this.triggerEvent('change', stepper);

packages/stepper/index.pcss

@@ -3,10 +3,8 @@
 }
 .zan-stepper view {
   display: inline-block;
-  line-height: 20px;
   padding: 5px 0;
   text-align: center;
-  min-width: 40px;
   box-sizing: border-box;
   vertical-align: middle;
   font-size: 12px;
@@ -21,12 +19,9 @@
   display: inline-block;
   text-align: center;
   vertical-align: middle;
-  height: 30px;
-  width: 40px;
   /* 重置 input 默认样式 */
   min-height: auto;
   font-size: 12px;
-  line-height: 30px;
 }
 .zan-stepper .zan-stepper__plus {
   border-left: none;
@@ -46,3 +41,23 @@
   line-height: 28px;
   height: 28px;
 }
+
+.zan-stepper--middle view {
+  min-width: 40px;
+  line-height: 20px;
+}
+.zan-stepper--middle .zan-stepper__text {
+  width: 40px;
+  line-height: 30px;
+  height: 30px;
+}
+
+.zan-stepper--large view {
+  min-width: 44px;
+  line-height: 22px;
+}
+.zan-stepper--large .zan-stepper__text {
+  width: 44px;
+  line-height: 32px;
+  height: 32px;
+}

packages/stepper/index.wxml

@@ -1,4 +1,4 @@
-<view class="zan-stepper {{ size === 'small' ? 'zan-stepper--small' : '' }}">
+<view class="zan-stepper zan-stepper--{{ size }}">
   <view
     class="zan-stepper__minus {{ stepper <= min ? 'zan-stepper--disabled' : '' }}"
     data-disabled="{{ stepper <= min }}"