lcoco/components/en-checkbox/en-checkbox.vue

<template>
  <view class="box">
    <view class="input-box">
      <view class="input-box-left">
        {{ label }}
      </view>
      <view class="input-box-right">
          <checkbox-group @change="checkboxChange">
            <label class="checkbox-item" v-for="(checkboxItem,index) in checkboxArr">
              <checkbox  :id="name+index" :value="checkboxItem.id"  />
              <text  class="iconfont icon-ok" v-if="checkboxItem.isChecked"> &#xe609;</text>
              <text  class="iconfont icon-no" v-else> &#xe626;</text>
              {{checkboxItem.name}}
            </label>
          </checkbox-group>
      </view>
    </view>
    <view class="box-solid"></view>
  </view>
</template>

<script>
export default {
  name: 'en-checkbox',
  props: {
    type: {
      type: String,
      default: 'text'
    },
    label: {
      type: String,
      default: '标题'
    },
    checkboxData: {
      type: Array,
      default: []
    },
    checkboxKey:{
      type:String,
      default:'id'
    },
    checkboxValue:{
      type:String,
      default:'name'
    },
    disabled: {
      default: false
    },
    name: {
      type: String,
      default: 'text'
    },
    valueType: {
      default: '1'
    },
    value: {
      default: []
    }
  },
  data() {
    return {
      inputValue: [],
      checkboxArr:[],
    }
  },
  components: {},
  mounted() {
    this.setValue()
    this.setCheckboxData()
  },
  watch: {
    'value': function () {
      if (this.inputValue !== this.value) {
        this.setValue()
      }
    },
    'inputValue': function () {
      if(this.valueType==='1'){
        this.$emit('input', this.inputValue.join(','))
      }else {
        this.$emit('input', this.inputValue)
      }

    }
  },
  methods: {
    checkboxChange(e){
      this.inputValue=e.detail.value
      console.log(this.inputValue)
      this.setIsCheckbox()
    },
    setCheckboxData(){
      if(this.checkboxData.length<=0){
        return ;
      }
      this.checkboxData.forEach((item)=>{
        if(item[this.checkboxKey] && item[this.checkboxValue]){
          this.checkboxArr.push({
            'id':item[this.checkboxKey]+'',
            'name':item[this.checkboxValue],
            'isChecked':false,
          })
        }
      })
      this.setIsCheckbox()
    },
    setValue(){
      let newValue=this.value
      if(typeof newValue ==='string'){
        newValue=newValue.split(',')
      }
      this.inputValue = []
      newValue.forEach((item)=>{
        this.inputValue.push(item+'')
      })
      this.setIsCheckbox()
    },
    setIsCheckbox(){
      this.checkboxArr.forEach((item)=>{
        item.isChecked=this.inputValue.indexOf(item.id) >= 0
      })
    }
  }

}
</script>

<style lang="scss" scoped>
  @font-face {
    font-family: 'iconfont';
    src: url('iconfont.ttf?t=1662432727120') format('truetype');
  }
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 36rpx;
    color: #3169FA;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .box{
    background-color: #ffffff;
    padding: 34rpx 0 12rpx 0;
    .input-box {
      display: flex;
      align-items: center;
      .input-box-left {
        width: 210rpx;
        min-width: 210rpx;
        font-size: 32rpx;
        color: #333333;
      }
      .input-box-right{
        display: flex;
        align-items: center;
        .checkbox-item{
          padding-right: 20rpx;
          margin-bottom: 20rpx;
          checkbox{
            display: none;
          }
        }
      }

    }
    .box-solid{
      border-bottom: 1px solid #F0F0F0;
      margin-top:22rpx;
    }
  }

</style>