先上图
template
<div>
<div class="radio-box" v-for="(item,index) in radios" :key="item.id">
<span class="radio" :class="{'on':item.isChecked}"></span>
<input v-model="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; //雪碧图
}