feat: pi-stepper优化

sadais-org · Nov 16, 2020 · e5a4942 · e5a4942
1 parent 8be4342
commit e5a4942
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 29 deletions.
diff --git a/components/pi-stepper/index.vue b/components/pi-stepper/index.vue
@@ -1,6 +1,19 @@
 <template>
-  <view class="pi-stepper" :style="[customStyle]" :class="[customClass, { disabled }, theme]">
-    <view class="pi-stepper-icon pi-icon-subtract" :style="[iconStyle]" @tap="handleChange(-1)" />
+  <view
+    class="pi-stepper"
+    :style="[customStyle]"
+    :class="[customClass, theme, shape, { disabled }]"
+  >
+    <view
+      v-if="showAdd"
+      class="pi-stepper-icon pi-icon-subtract"
+      :class="[{ disabled: disableSubtract }]"
+      hover-class="pi-hover-class"
+      :hover-start-time="10"
+      :hover-stay-time="100"
+      :style="[iconStyle]"
+      @tap="handleChange(-1)"
+    />
     <input
       :value="val"
       type="digit"
@@ -9,7 +22,16 @@
       :style="[inputStyle, { width: getInputWidth }]"
       @input="handleInputChange"
     />
-    <view class="pi-stepper-icon pi-icon-add" :style="[iconStyle]" @tap="handleChange(1)" />
+    <view
+      v-if="showSubtract"
+      class="pi-stepper-icon pi-icon-add"
+      :class="[{ disabled: disableAdd }]"
+      hover-class="pi-hover-class"
+      :hover-start-time="10"
+      :hover-stay-time="100"
+      :style="[iconStyle]"
+      @tap="handleChange(1)"
+    />
   </view>
 </template>
 
@@ -161,22 +183,6 @@ export default {
         return stepper.disabled
       }
     },
-    // 是否禁用增加按钮
-    disableAdd: {
-      type: Boolean,
-      // false
-      default() {
-        return stepper.disableAdd
-      }
-    },
-    // 是否禁用减少按钮
-    disableSubtract: {
-      type: Boolean,
-      // false
-      default() {
-        return stepper.disableSubtract
-      }
-    },
     // 是否禁用输入框
     disableInput: {
       type: Boolean,
@@ -190,6 +196,12 @@ export default {
     return {}
   },
   computed: {
+    disableAdd() {
+      return this.max !== null && this.val >= this.max
+    },
+    disableSubtract() {
+      return this.min !== null && this.val <= this.min
+    },
     getInputWidth() {
       return this.$pi.common.addUnit(this.inputWidth)
     },
@@ -200,6 +212,7 @@ export default {
       const style = {
         width: this.getButtonSize,
         height: this.getButtonSize,
+        lineHeight: this.getButtonSize,
         fontSize: this.getButtonSize
       }
       if (this.buttonColor) {
@@ -210,9 +223,6 @@ export default {
           style.backgroundColor = this.buttonColor
         }
       }
-      if (this.shape === 'square') {
-        style.borderRadius = '8rpx'
-      }
       return style
     }
   },
@@ -250,14 +260,35 @@ export default {
   .pi-stepper-icon {
     color: $pi-primary-color;
     border: 2rpx solid $pi-primary-color;
-    border-radius: 50000px;
     &::before {
       transform: scale(0.8);
     }
+    &::after {
+      content: '';
+    }
+    &.disabled {
+      opacity: 0.4;
+    }
   }
   &.disabled {
     opacity: 0.4;
   }
+  &.round {
+    .pi-stepper-icon {
+      border-radius: 5000rpx;
+      &::after {
+        border-radius: 5000rpx;
+      }
+    }
+  }
+  &.square {
+    .pi-stepper-icon {
+      border-radius: 8rpx;
+      &::after {
+        border-radius: 8rpx;
+      }
+    }
+  }
   &.fill {
     .pi-stepper-icon {
       color: #ffffff;

diff --git a/config/stepper.js b/config/stepper.js
@@ -5,17 +5,15 @@ export default {
   min: 1, // 最小值
   max: null, // 最大值
   step: 1, // 步长，每次点击时改变的值
-  inputWidth: 64, // 输入框宽度，默认单位为rpx
-  buttonSize: 42, // 按钮大小
+  inputWidth: 84, // 输入框宽度，默认单位为rpx
+  buttonSize: 50, // 按钮大小
   buttonColor: '', // 按钮颜色
   decimal: 0, // 小数位
   shape: 'round', // 形状 round || square
   theme: 'line', // 主题模式（line: 线框模式，fill: 实底模式）
   integer: false, // 是否只允许输入整数
   showAdd: true, // 是否显示增加按钮
   showSubtract: true, // 是否显示减少按钮
-  disabled: false, // 是否禁用步进器
-  disableAdd: false, // 是否禁用增加按钮
   disableSubtract: false, // 是否禁用减少按钮
   disableInput: true // 是否禁用输入框
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sadais-piui",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "piui组件库",
   "main": "index.js",
   "scripts": {

diff --git a/scss/common.scss b/scss/common.scss
@@ -568,6 +568,7 @@ image {
     right: 0;
     bottom: 0;
     left: 0;
+    content: '';
     background: rgba(0, 0, 0, 0.05);
   }
 }

diff --git a/tools/validate.js b/tools/validate.js
@@ -56,7 +56,7 @@ export const isDecimal = value => {
  * 验证数值
  */
 export const isNumerical = value => {
-  return /^(\-|\+)?\d+(\.\d+)?$/.test(value)
+  return isNumber(value) || isDecimal(value)
 }
 
 /**