uniapp开发封装自定义checkbox组件

新建一个cus-checkbox文件夹，里面存放checkbox代码

<template>
  <view class="cu-checkbox" :style="boxStyle" @click="changeStatus">
    <view class="u-checkbox__icon-wrap"
      :style="{ background: isCheck == 1 ? activeBgColor : '#FFF', border: isCheck == 1 ? 'none' : '', width: size + 'rpx', height: size + 'rpx' }"
      :class="{ 'diabled-wrap ': disabled }">
      <slot name="icon">
        <u-icon class="u-checkbox__icon-wrap__icon" :color="iconColor" :size="iconSize" name="checkbox-mark"
          v-if="isCheck" />
      </slot>
    </view>
    <text class="label_wrap" :style="{ fontSize: labelSize + 'rpx', color: labelColor }">
      {{ label }}
    </text>
  </view>
</template>
<script>
export default {
  name: 'cus-checkbox',
  components: {
  },
  /**
   * @param  isCheck
   */
  props: {
    isCheck: {
      type: Boolean | String,
      default: false
    },
    size: {
      type: Number | String,
      default: 14
    },
    activeBgColor: {
      type: String,
      default: '#71CE58'
    },
    activeIconColor: {
      type: String,
      default: '#fff'
    },
    iconSize: {
      type: Number | String,
      default: 24
    },
    iconColor: {
      type: String,
      default: '#fff'
    },
    disabled: {
      type: Boolean | String,
      default: false
    },
    label: {
      type: String,
      default: ''
    },
    labelSize: {
      type: Number | String,
      default: 9.5
    },
    labelColor: {
      type: String,
      default: '#333'
    },
  },
  computed: {
    boxStyle() {
      return {
        pointerEvents: this.disabled ? "none" : ''
      }
    },
  },
  data() {
    return {
      throttleTime: 500
    }
  },

  methods: {
    changeStatus() {
      uni.$u.throttle(() => {
        this.$emit('change',)
      }, this.throttleTime);
    }
  },
}
</script>
<style lang="scss" scoped>
.cu-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
}

.u-checkbox__icon-wrap {
  border: 2rpx solid #DCDEE0;
  border-radius: 3rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.label_wrap {
  margin-left: 6rpx;
}

.diabled-wrap {
  background: #ebedf0 !important;
}
</style>

使用组件

 <cus-checkbox :isCheck="item.breakfast" size="20" :disabled="!item.startLunch"
                    @change="changeBreakfast(item, index)"></cus-checkbox>

因为业务场景需要，自己封装checkbox中并未返回改变后的状态值，而是在父组件的change事件中将isCheck绑定的值取反。