bn-q-icon/components/en-from/en-radio/en-radio.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">
          <radio-group class="radio-data" @change="radioChange">
            <label class="radio-item" v-for="(radioItem,index) in radioArr">
              <radio  :id="name+index" :value="radioItem.id"  />
              <text  class="iconfont icon-ok" v-if="inputValue===radioItem.id">&#xe608;</text>
              <text  class="iconfont" v-else> &#xead9;</text>
              {{radioItem.name}}
            </label>
          </radio-group>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'en-radio',
  props: {
    type: {
      type: String,
      default: 'text'
    },
    label: {
      type: String,
      default: '标题'
    },
    radioData: {
      type: Array,
      default: []
    },
    radioKey:{
      type:String,
      default:'id'
    },
    radioValue:{
      type:String,
      default:'name'
    },
    disabled: {
      default: false
    },
    name: {
      type: String,
      default: 'text'
    },
    value: {
      default: '1'
    }
  },
  data() {
    return {
      inputValue: [],
      radioArr:[],
      labelWidth:0
    }
  },
  components: {},
  mounted() {
    this.setValue()
    this.setRadioData()
    this.setLabelWidth()
  },
  watch: {
    'value': function () {
      if (this.inputValue !== this.value) {
        this.setValue()
      }
    },
    'inputValue': function () {
      this.$emit('input', this.inputValue)
    }
  },
  methods: {
    radioChange(e){
      this.inputValue=e.detail.value
      console.log(this.inputValue)
    },
    setRadioData(){
      if(this.radioData.length<=0){
        return ;
      }
      this.radioData.forEach((item)=>{
        if(item[this.radioKey] && item[this.radioValue]){
          this.radioArr.push({
            'id':item[this.radioKey]+'',
            'name':item[this.radioValue]
          })
        }
      })
    },
    setValue(){
      this.inputValue = this.value+''
    },
    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;
        .radio-data{
          display: flex;
          flex-wrap: wrap;
          .radio-item{
            margin: 6rpx 20rpx 0 6rpx;
            .iconfont{
              padding-right: 6rpx;
            }
            .icon-ok{
              color: var(--selected-color);
            }
            .icon-no{
              color: var(--unselected-color);
            }
            radio{
              display: none;
            }
          }
        }
      }
    }
  }

</style>