Rewrite the el-radio style to el-checkbox, and add the function of canceling the selected item

Contents in the template:

<div class="uoload-shuru">
   <div class="cardNo2">增加容量</div>
      <el-radio-group v-model="radio1">
         <el-radio v-for="(item, index) in capacity" :key="index" :label="item"
              @click.native.prevent="radioChange(item, 1)"></el-radio>
         </el-radio-group>
 </div>

Data in data:

 data() {
    return {
      radio1: '100MB（￥100.00/年）',
      capacity: [  // 容量
        '100MB（￥100.00/年）',
        '500MB（￥390.00/年）',
        '1000MB（￥680.00/年）',
        '2000MB（￥1180.00/年）',
        '5000MB（￥2680.00/年）'
      ],
    }
  }

The control button can only be single-selected:

  // 单选
    radioChange(val, i) {
      switch (i) {  // 原项目包含多个单选组，数据和页面已简写
        case 1: 
          this.radio1 = val == this.radio1 ? '' : val
          break;
        case 2:
          this.radio2 = val == this.radio2 ? '' : val
          break;
        case 3:
          this.radio3 = val == this.radio3 ? '' : val
          break;
        case 4:
          this.radio4 = val == this.radio4 ? '' : val
          break;
        case 5:
          this.radio5 = val == this.radio5 ? '' : val
          break;
        case 6:
          this.radio6 = val == this.radio6 ? '' : val
          break;
      }
    }
  }

Style modification:

::v-deep .el-radio__inner {
  border-radius: 0;
}

::v-deep .el-radio__inner:hover {
  border: none;
  // 这里用形状为勾选框的图片直接替换
  background: url('../../assets/svg/select.svg') center / 100%;
}

::v-deep .el-radio__input.is-checked .el-radio__inner {
  border: none;
 // 这里用形状为勾选框的图片直接替换
  background: url('../../assets/svg/select.svg') center / 100%;
}

::v-deep .el-radio__label {
  color: $flColor; // 设置选项文字颜色
}

::v-deep .is-checked .el-radio__label {
  color: $gfontMain;  // 设置被选中 选项文字颜色
}


::v-deep .el-radio__input.is-checked .el-radio__inner::after {
  display: none;  // 隐藏radio被选中时中间的小圆点
}