关于点击 radio 外边包裹的 div，触发 radio 点击事件，扩大点击范围

<div
          class="radioBox"
          v-for="it in item.labelValue"
          :key="it"
          :style="{ width: largeWidth.includes(it) ? '188px' : '120px' }"
          :class="{ active: it === chooseDataList[item.key] }"
          @click="chooseItem(item.key, it, $event)"
        >
          <input
            class="radioStyle"
            type="radio"
            :value="it"
            v-model="chooseDataList[item.key]"
          />

//JS
    method: {
    chooseItem(key,val,e) {e.currentTarget.firstElementChild.click();}      
    }

PS：修改单选框样式，换为背景图  控制active后面的元素的显隐，，修改radio本身的话用伪元素就行

 <input
            class="radioStyle"
            type="radio"
            :value="it"
            v-model="chooseDataList[item.key]"
            @click.stop="chooseItem(item.key, it, chooseDataList[item.key])"
          />
          <div class="checkedStyle"></div>

//未选中

  .radioStyle {
          margin-left: 12.5px;
          margin-right: 9px;
          visibility: hidden;
          outline: none;
        }
        .radioStyle:before {
          margin-top: -7px;
          visibility: visible;
          content: '';
          width: 10px;
          height: 10px;
          border: 1px solid #dddddd;
          display: inline-block;
          border-radius: 50%;
          vertical-align: middle;
        }
        .checkedStyle {
          display: none;
        }

//选中

.active {
        background: #f3f6ff;
        border: 1px solid #5679f9;
        .radioStyle {
          display: none;
        }
        .checkedStyle {
          display: block;
          margin-left: 12.5px;
          margin-right: 9px;
          width: 14px;
          height: 14px;
          background: no-repeat center/cover;
          background-image: url('./assets/checked.png') !important;
        }
      }