vue 自定义样式radio单选框 样式美化

先上图

template

<div>
  <div class="radio-box" v-for="(item,index) in radios" :key="item.id">
    class="radio" :class="{'on':item.isChecked}">
    "payType" :value="item.value" class="input-radio" :checked='item.isChecked'  @click="check(index)" type="radio">{{item.label}}
  div>
div>

script

data() {
    return {
        payType: '在线支付',
        radios:[
          {
            label: '在线支付',
            value:'在线支付',
            isChecked: true,
          },
          {
            label: '线下支付',
            value:'线下支付',
            isChecked: false,
          },
        ]
    }
  },
  methods: {
    check(index) {
      // 先取消所有选中项
      this.radios.forEach((item) => {
        item.isChecked = false;
      });
      //再设置当前点击项选中
      this.payType = this.radios[index].value;
      // 设置值，以供传递
      this.radios[index].isChecked = true;
      console.log(this.payType);
    },
    loadData(){
        // 设置一进来是  在线支付  还是  线下支付
        _this.payType = data.FPayType
        if(data.FPayType === "在线支付"){
          _this.$set(_this.radios[0],'isChecked',true)  
          _this.$set(_this.radios[1],'isChecked',false)  
        }else{
          _this.$set(_this.radios[0],'isChecked',false)  
          _this.$set(_this.radios[1],'isChecked',true)  
        }
    }
  }

css

.radio-box{
  display: inline-block;
  position: relative;
  height: 25px;
  line-height: 25px;
  margin-right: 5px;
}
.input-radio {
  display: inline-block;
  position: absolute;
  opacity: 0;
  width: 25px;
  height: 25px;
  cursor: pointer;
  left: 0px;
  outline: none;
  -webkit-appearance: none;
}
.radio {
  display: inline-block;
  width: 25px;
  height: 25px;
  vertical-align: middle;
  cursor: pointer;
  background-image: url(../../assets/images/OS_Box_Empty.png);
  background-repeat: no-repeat;
  //background-position: 0 0;
  background-size: 100% 100%;
  //雪碧图
}
.on {
  background-image: url(../../assets/images/OS_Box_On.png);
  background-size: 100% 100%;
  //background-position: -25px 0;  //雪碧图
}