feat: 完善pi-checkbox

components/pi-checkbox-group/index.vue

@@ -47,20 +47,20 @@ export default {
       type: [String, Number],
       default: checkboxGroup.max
     },
-    // 排列方向，可选值为 horizontal vertical
+    // 排列方向，可选值为 horizontal vertical（默认''，不设置）
     direction: {
       type: String,
       default: checkboxGroup.direction,
       validator: function(value) {
-        return ['horizontal', 'vertical'].includes(value)
+        return ['', 'horizontal', 'vertical'].includes(value)
       }
     },
-    // 形状 round || square（默认'round'）
+    // 形状 round || square（默认''，不设置）
     shape: {
       type: String,
       default: checkboxGroup.shape,
       validator: function(value) {
-        return ['square', 'round'].includes(value)
+        return ['', 'square', 'round'].includes(value)
       }
     },
     // 是否禁用复选框
@@ -83,12 +83,12 @@ export default {
       type: [String],
       default: checkboxGroup.activeColor
     },
-    // 激活模式（line: 线框模式，fill: 实底模式）
+    // 激活模式（line: 线框模式，fill: 实底模式）（默认''，不设置）
     activeMode: {
       type: [String],
       default: checkboxGroup.activeMode,
       validator: function(value) {
-        return ['line', 'fill'].includes(value)
+        return ['', 'line', 'fill'].includes(value)
       }
     }
   },
@@ -121,6 +121,7 @@ export default {
 <style lang="scss" scoped>
 .pi-checkbox-group {
   display: inline-flex;
+  flex-wrap: wrap;
   &.horizontal {
     flex-direction: row;
     align-items: center;

components/pi-checkbox/index.vue

@@ -1,11 +1,12 @@
 <template>
-  <view class="pi-check-wrap" :class="{ disabled: disabled }" @tap="handleCheckboxToggle">
-    <view
-      class="check-icon"
-      :style="[checkboxStyle, customStyle]"
-      :class="[iconClass, customClass]"
-    >
-      <pi-icon name="check" :size="iconSize" />
+  <view
+    class="pi-check-wrap"
+    :style="[customStyle]"
+    :class="[customClass, { disabled: getDisable }]"
+    @tap="handleCheckboxToggle"
+  >
+    <view class="check-icon" :style="[checkboxStyle]" :class="[iconClass]">
+      <pi-icon name="check" :size="getIconSize" />
     </view>
     <view class="checkbox-label">
       <slot />
@@ -97,27 +98,52 @@ export default {
     }
   },
   computed: {
+    getShape() {
+      return this.piCheckboxGroup && this.piCheckboxGroup.shape
+        ? this.piCheckboxGroup.shape
+        : this.shape
+    },
+    getDisable() {
+      return this.piCheckboxGroup && this.piCheckboxGroup.disabled ? true : this.disabled
+    },
+    getActiveMode() {
+      return this.piCheckboxGroup && this.piCheckboxGroup.activeMode
+        ? this.piCheckboxGroup.activeMode
+        : this.activeMode
+    },
+    getActiveColor() {
+      return this.piCheckboxGroup && this.piCheckboxGroup.activeColor
+        ? this.piCheckboxGroup.activeColor
+        : this.activeColor
+    },
     getSize() {
-      return this.$pi.common.addUnit(this.size)
+      return this.piCheckboxGroup && this.piCheckboxGroup.size
+        ? this.$pi.common.addUnit(this.piCheckboxGroup.size)
+        : this.$pi.common.addUnit(this.size)
+    },
+    getIconSize() {
+      return this.piCheckboxGroup && this.piCheckboxGroup.iconSize
+        ? this.$pi.common.addUnit(this.piCheckboxGroup.iconSize)
+        : this.$pi.common.addUnit(this.iconSize)
     },
     checkboxStyle() {
       const style = {
         width: this.getSize,
         height: this.getSize
       }
-      this.shape === 'round' && (style.borderRadius = '50%')
-      if (this.activeColor && this.val) {
-        style.borderColor = this.activeColor
-        if (this.activeMode === 'line') {
-          style.color = this.activeColor
+      this.getShape === 'round' && (style.borderRadius = '50%')
+      if (this.getActiveColor && this.val) {
+        style.borderColor = this.getActiveColor
+        if (this.getActiveMode === 'line') {
+          style.color = this.getActiveColor
         } else {
-          style.backgroundColor = this.activeColor
+          style.backgroundColor = this.getActiveColor
         }
       }
       return style
     },
     iconClass() {
-      const classes = [this.activeMode]
+      const classes = [this.getActiveMode]
       if (this.val) classes.push('active')
       return classes.join(' ')
     }
@@ -135,7 +161,7 @@ export default {
       }
     },
     handleCheckboxToggle() {
-      if (this.disabled) return
+      if (this.getDisable) return
       // 如果父组件做了可选数量限制
       if (!this.val && this.piCheckboxGroup && this.piCheckboxGroup.getMax > 0) {
         const max = this.piCheckboxGroup.getMax
@@ -160,33 +186,41 @@ $disable-color: #c8c9cc;
     align-items: center;
     justify-content: center;
     overflow: hidden;
-    font-weight: 800;
-    color: transparent;
+    font-weight: 900;
+    color: #cccccc;
     border: 1px solid $disable-color;
     border-radius: 4rpx;
     transition: all $pi-animation-duration ease-in-out;
-    &.line.active {
-      color: $pi-primary-color;
-      border-color: $pi-primary-color;
+    &.line {
+      &.active {
+        color: $pi-primary-color;
+        background-color: #ffffff;
+        border-color: $pi-primary-color;
+      }
     }
-    &.fill.active {
+    &.fill {
       color: #ffffff;
-      background: $pi-primary-color;
-      border-color: $pi-primary-color;
+      background-color: #cccccc;
+      border-color: #cccccc;
+      &.active {
+        color: #ffffff;
+        background: $pi-primary-color;
+        border-color: $pi-primary-color;
+      }
     }
   }
+  .checkbox-label {
+    margin-left: 10rpx;
+    word-wrap: break-word;
+  }
   &.disabled {
-    color: $disable-color;
     cursor: not-allowed;
     .check-icon {
-      background-color: #ebedf0;
-      border-color: $disable-color;
+      opacity: 0.4;
+    }
+    .checkbox-label {
+      color: #cccccc;
     }
-  }
-  .checkbox-label {
-    margin-right: 24rpx;
-    margin-left: 10rpx;
-    word-wrap: break-word;
   }
 }
 </style>

config/checkbox.js

@@ -4,7 +4,7 @@ export default {
   name: '', // 标识符
   shape: 'square', // 形状，可选值为 square round
   disabled: false, // 是否禁用复选框
-  size: 36, // checkbox大小，单位rpx
+  size: 40, // checkbox大小，单位rpx
   iconSize: 28, // checkbox icon 大小，单位rpx
   activeColor: '', // 选中时图标的颜色
   activeMode: 'line' // 激活模式（line: 线框模式，fill: 实底模式）

config/checkboxGroup.js

@@ -2,11 +2,11 @@ export default {
   customClass: '', // 自定义样式类，字符串形式（''）
   customStyle: {}, // 自定义样式，对象形式（默认值：{}）
   max: 0, // 最大可选数，0为无限制
-  direction: 'horizontal', // 排列方向，可选值为 horizontal vertical
-  shape: 'square', // 形状，可选值为 square round
+  direction: '', // 排列方向，可选值为 horizontal vertical
+  shape: '', // 形状，可选值为 square round
   disabled: false, // 是否禁用复选框
-  size: 36, // checkbox大小，单位rpx
-  iconSize: 28, // checkbox icon 大小，单位rpx
+  size: 0, // checkbox大小，单位rpx
+  iconSize: 0, // checkbox icon 大小，单位rpx
   activeColor: '', // 选中时图标的颜色
-  activeMode: 'line' // 激活模式（line: 线框模式，fill: 实底模式）
+  activeMode: '' // 激活模式（line: 线框模式，fill: 实底模式）
 }

tools/validate.js

@@ -11,7 +11,7 @@ export const isEmail = value => {
  * 验证手机格式
  */
 export const isMobile = value => {
-  return /^1[23456789]\d{9}$/.test(value)
+  return /^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value)
 }
 
 /**