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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值