bn-q-icon/components/en-from/en-checkbox/en-checkbox.vue

<template>
  <view class="box">
    <view class="input-box">
      <view class="input-box-left" :style="{'letter-spacing':labelWidth}">
        {{ label }}
      </view>
      <view class="input-box-right">
          <checkbox-group class="checkbox-data" @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>
</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:[],
      labelWidth:0
    }
  },
  components: {},
  mounted() {
    this.setValue()
    this.setCheckboxData()
    this.setLabelWidth()
  },
  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
      })
    },
    setLabelWidth(){
      let differenceNum=4- this.label.length;
      if(differenceNum===2){
        this.labelWidth='2em'
      }else if(differenceNum===1){
        this.labelWidth='0.5em'
      }
    }
  }

}
</script>

<style lang="scss" scoped>
  @import url("../../static/css/en-common.css");
  .box{
    .input-box {
      display: flex;
      align-items: center;
      .input-box-left {
        width: 210rpx;
        min-width: 210rpx;
        color: #333333;
      }
      .input-box-right{
        display: flex;
        align-items: center;
        .checkbox-data{
          display: flex;
          flex-wrap: wrap;
          .checkbox-item{
            margin: 6rpx 20rpx 0 6rpx;
            .iconfont{
              padding-right: 6rpx;
            }
            .icon-ok{
              color: var(--selected-color);
            }
            .icon-no{
              color: var(--unselected-color);
            }
            checkbox{
              display: none;
            }
          }
        }
      }
    }
  }

</style>