feat: 完善pi-checkbox-group

components/pi-checkbox-group/index.vue

@@ -1,9 +1,132 @@
 <template>
-  <view />
+  <view
+    class="pi-checkbox-group"
+    :style="[customStyle]"
+    :class="[
+      { horizontal: direction === 'horizontal' },
+      { vertical: direction === 'vertical' },
+      customClass
+    ]"
+  >
+    <slot />
+  </view>
 </template>
 
 <script>
+import ValueSync from '../../mixin/value-sync'
+import { getConfig } from '../../config'
+
+const TAG = 'PiCheckbox'
+const { checkboxGroup } = getConfig()
+
 export default {
-  name: 'PiCheckboxGroup'
+  name: 'PiCheckboxGroup',
+  // 混入自定义样式customStyle和customClass
+  mixins: [ValueSync], // 注入value与val，进行双向绑定
+  props: {
+    // 初始值
+    value: {
+      required: false
+    },
+    // 自定义样式，对象形式（默认值：{}）
+    customStyle: {
+      type: Object,
+      default() {
+        return checkboxGroup.customStyle
+      }
+    },
+    // 自定义样式类，字符串形式（''）
+    customClass: {
+      type: String,
+      default() {
+        return checkboxGroup.customClass
+      }
+    },
+    // 最大可选数，-1为无限制
+    max: {
+      type: [String, Number],
+      default: checkboxGroup.max
+    },
+    // 排列方向，可选值为 horizontal vertical
+    direction: {
+      type: String,
+      default: checkboxGroup.direction,
+      validator: function(value) {
+        return ['horizontal', 'vertical'].includes(value)
+      }
+    },
+    // 形状 round || square（默认'round'）
+    shape: {
+      type: String,
+      default: checkboxGroup.shape,
+      validator: function(value) {
+        return ['square', 'round'].includes(value)
+      }
+    },
+    // 是否禁用复选框
+    disabled: {
+      type: Boolean,
+      default: checkboxGroup.disabled
+    },
+    // checkbox大小，单位rpx
+    size: {
+      type: [String, Number],
+      default: checkboxGroup.size
+    },
+    // checkbox icon 大小，单位rpx
+    iconSize: {
+      type: [String, Number],
+      default: checkboxGroup.iconSize
+    },
+    // 选中时图标的颜色
+    activeColor: {
+      type: [String],
+      default: checkboxGroup.activeColor
+    },
+    // 激活模式（line: 线框模式，fill: 实底模式）
+    activeMode: {
+      type: [String],
+      default: checkboxGroup.activeMode,
+      validator: function(value) {
+        return ['line', 'fill'].includes(value)
+      }
+    }
+  },
+  computed: {
+    getMax() {
+      return parseInt(this.max, 10)
+    }
+  },
+  provide() {
+    return {
+      piCheckboxGroup: this
+    }
+  },
+  created() {
+    this.children = []
+  },
+  methods: {
+    emitChange() {
+      const vals = []
+      this.children.map(val => {
+        if (val.val && val.name) vals.push(val.name)
+      })
+      this.val = vals
+      this.handleEmitChange()
+    }
+  }
 }
 </script>
+
+<style lang="scss" scoped>
+.pi-checkbox-group {
+  display: inline-flex;
+  &.horizontal {
+    flex-direction: row;
+    align-items: center;
+  }
+  &.vertical {
+    flex-direction: column;
+  }
+}
+</style>

components/pi-checkbox/index.vue

@@ -1,9 +1,15 @@
 <template>
-  <view class="pi-check-wrap" @tap="handleCheckboxToggle">
-    <view class="check-icon" :style="[checkboxStyle, customStyle]" :class="[iconClass]">
+  <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>
-    <view class="checkbox-label"><slot /></view>
+    <view class="checkbox-label">
+      <slot />
+    </view>
   </view>
 </template>
 
@@ -37,6 +43,11 @@ export default {
         return checkbox.customClass
       }
     },
+    // checkbox组件的标示符
+    name: {
+      type: [String, Number],
+      default: checkbox.name
+    },
     // 形状 round || square（默认'round'）
     shape: {
       type: String,
@@ -74,6 +85,9 @@ export default {
       }
     }
   },
+  inject: {
+    piCheckboxGroup: { default: undefined }
+  },
   data() {
     return {
       // 初始化组件时，默认为加载中状态
@@ -92,7 +106,7 @@ export default {
         height: this.getSize
       }
       this.shape === 'round' && (style.borderRadius = '50%')
-      if (this.activeColor && this.value) {
+      if (this.activeColor && this.val) {
         style.borderColor = this.activeColor
         if (this.activeMode === 'line') {
           style.color = this.activeColor
@@ -104,21 +118,40 @@ export default {
     },
     iconClass() {
       const classes = [this.activeMode]
-      if (this.value) classes.push('active')
-      if (this.disabled) classes.push('disabled')
+      if (this.val) classes.push('active')
       return classes.join(' ')
     }
   },
+  mounted() {
+    this.init()
+  },
   methods: {
+    init() {
+      if (!this.piCheckboxGroup) return
+      this.piCheckboxGroup.children.push(this)
+      const checkboxGroupValue = this.piCheckboxGroup.value
+      if (checkboxGroupValue && checkboxGroupValue.includes(this.name)) {
+        this.val = true
+      }
+    },
     handleCheckboxToggle() {
+      if (this.disabled) return
+      // 如果父组件做了可选数量限制
+      if (!this.val && this.piCheckboxGroup && this.piCheckboxGroup.getMax > 0) {
+        const max = this.piCheckboxGroup.getMax
+        const currentCount = this.piCheckboxGroup.children.filter(c => c.val).length
+        if (max === currentCount) return
+      }
       this.val = !this.val
       this.handleEmitChange()
+      this.piCheckboxGroup && this.piCheckboxGroup.emitChange()
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+$disable-color: #c8c9cc;
 .pi-check-wrap {
   display: inline-flex;
   align-items: center;
@@ -129,7 +162,7 @@ export default {
     overflow: hidden;
     font-weight: 800;
     color: transparent;
-    border: 1px solid #c8c9cc;
+    border: 1px solid $disable-color;
     border-radius: 4rpx;
     transition: all $pi-animation-duration ease-in-out;
     &.line.active {
@@ -142,6 +175,14 @@ export default {
       border-color: $pi-primary-color;
     }
   }
+  &.disabled {
+    color: $disable-color;
+    cursor: not-allowed;
+    .check-icon {
+      background-color: #ebedf0;
+      border-color: $disable-color;
+    }
+  }
   .checkbox-label {
     margin-right: 24rpx;
     margin-left: 10rpx;

config/checkboxGroup.js

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

mixin/value-sync.js

@@ -26,6 +26,7 @@ export default {
   methods: {
     handleEmitChange() {
       this.$emit('input', this.val)
+      this.$emit('change', this.val)
     }
   }
 }