改写el-radio 样式为el-checkbox，另外添加上取消已选中项的功能

最新推荐文章于 2023-10-10 19:13:27 发布

Lavian_

最新推荐文章于 2023-10-10 19:13:27 发布

阅读量435

点赞数

文章标签：前端 elementui Powered by 金山文档

本文链接：https://blog.csdn.net/m0_65835778/article/details/129169088

版权

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中的数据：

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

控制按钮只能单选的方法：

  // 单选
    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;
      }
    }
  }

样式修改：


::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被选中时中间的小圆点
}