feat: 完善pi-checkbox

components/pi-checkbox-group/index.vue

@@ -63,6 +63,11 @@ export default {
         return ['', 'square', 'round'].includes(value)
       }
     },
+    // 边框大小，单位rpx
+    border: {
+      type: [String, Number],
+      default: checkboxGroup.border
+    },
     // 是否禁用复选框
     disabled: {
       type: Boolean,

components/pi-checkbox/index.vue

@@ -6,7 +6,7 @@
     @tap="handleCheckboxToggle"
   >
     <view class="check-icon" :style="[checkboxStyle]" :class="[iconClass]">
-      <pi-icon name="check" :size="getIconSize" />
+      <pi-icon name="blod-check" :size="getIconSize" />
     </view>
     <view class="checkbox-label">
       <slot />
@@ -57,6 +57,16 @@ export default {
         return ['square', 'round'].includes(value)
       }
     },
+    // 当shape为square的时候，设置圆角，单位rpx
+    borderRadius: {
+      type: [String, Number],
+      default: checkbox.borderRadius
+    },
+    // 边框大小，单位rpx
+    border: {
+      type: [String, Number],
+      default: checkbox.border
+    },
     // 是否禁用复选框
     disabled: {
       type: Boolean,
@@ -90,19 +100,24 @@ export default {
     piCheckboxGroup: { default: undefined }
   },
   data() {
-    return {
-      // 初始化组件时，默认为加载中状态
-      loading: true,
-      // 图片是否加载错误，如果是，则显示错误占位图
-      error: false
-    }
+    return {}
   },
   computed: {
     getShape() {
       return this.piCheckboxGroup && this.piCheckboxGroup.shape
         ? this.piCheckboxGroup.shape
         : this.shape
     },
+    getBorderRadius() {
+      return this.piCheckboxGroup && this.piCheckboxGroup.borderRadius
+        ? this.$pi.common.addUnit(this.piCheckboxGroup.borderRadius)
+        : this.$pi.common.addUnit(this.borderRadius)
+    },
+    getBorder() {
+      return this.piCheckboxGroup && this.piCheckboxGroup.border
+        ? this.$pi.common.addUnit(this.piCheckboxGroup.border)
+        : this.$pi.common.addUnit(this.border)
+    },
     getDisable() {
       return this.piCheckboxGroup && this.piCheckboxGroup.disabled ? true : this.disabled
     },
@@ -129,7 +144,9 @@ export default {
     checkboxStyle() {
       const style = {
         width: this.getSize,
-        height: this.getSize
+        height: this.getSize,
+        borderRadius: this.getBorderRadius,
+        borderWidth: this.getBorder
       }
       this.getShape === 'round' && (style.borderRadius = '50%')
       if (this.getActiveColor && this.val) {
@@ -186,10 +203,8 @@ $disable-color: #c8c9cc;
     align-items: center;
     justify-content: center;
     overflow: hidden;
-    font-weight: 900;
     color: #cccccc;
-    border: 1px solid $disable-color;
-    border-radius: 4rpx;
+    border: 4rpx solid $disable-color;
     transition: all $pi-animation-duration ease-in-out;
     &.line {
       &.active {

config/checkbox.js

@@ -3,9 +3,11 @@ export default {
   customStyle: {}, // 自定义样式，对象形式（默认值：{}）
   name: '', // 标识符
   shape: 'square', // 形状，可选值为 square round
+  borderRadius: 8, // 当shape为square的时候，设置圆角，单位rpx
+  border: 4, // 边框大小，单位rpx
   disabled: false, // 是否禁用复选框
   size: 40, // checkbox大小，单位rpx
-  iconSize: 28, // checkbox icon 大小，单位rpx
+  iconSize: 24, // checkbox icon 大小，单位rpx
   activeColor: '', // 选中时图标的颜色
   activeMode: 'line' // 激活模式（line: 线框模式，fill: 实底模式）
 }

config/checkboxGroup.js

@@ -4,6 +4,8 @@ export default {
   max: 0, // 最大可选数，0为无限制
   direction: '', // 排列方向，可选值为 horizontal vertical
   shape: '', // 形状，可选值为 square round
+  borderRadius: 0, // 当shape为square的时候，设置圆角，单位rpx
+  border: 0, // 边框大小，单位rpx
   disabled: false, // 是否禁用复选框
   size: 0, // checkbox大小，单位rpx
   iconSize: 0, // checkbox icon 大小，单位rpx

index.js

@@ -1,4 +1,5 @@
 import piTools from './tools'
+import piUtils from './utils'
 import { getConfig, setConfig } from './config'
 
 const logStyle = 'color:#ff6a00;font-size:20px;font-weight:500;'
@@ -13,6 +14,7 @@ const install = (Vue, config = {}) => {
   console.log('%cpiui tools js使用方法：this.$pi.xxx', logStyle)
   Vue.prototype.$piConfig = piConfig
   Vue.prototype.$pi = piTools
+  Vue.prototype.$piUtils = piUtils
   Vue.prototype.$toast = piTools.toast.info
   Vue.prototype.$loading = piTools.toast.loading
   Vue.prototype.$hideLoading = piTools.toast.hideLoading

utils/index.js

@@ -0,0 +1,6 @@
+import { dynamicImport } from '../tools/common'
+
+/**
+ * 默认导出导入本目录下，排除index.js的所有js
+ */
+export default dynamicImport(require.context('./', false, /\.js$/))