先上效果
主编已回复:
{{item.label}}
js:
data() {
return {
radio: '1',
radios:[
{
label: '是',
value:'1',
isChecked: true,
},
{
label: '否',
value:'2',
isChecked: false,
},
{
label: '全部',
value:'3',
isChecked: false,
},
]
}
},
methods: {
check(index) {
// 先取消所有选中项
this.radios.forEach((item) => {
item.isChecked = false;
});
//再设置当前点击项选中
this.radio = this.radios[index].value;
// 设置值，以供传递
this.radios[index].isChecked = true;
console.log(this.radio);
}
}
样式：
.radio-box{
display: inline-block;
position: relative;
height: 25px;
line-height: 25px;
margin-right: 5px;
}
.radio {
display: inline-block;
width: 25px;
height: 25px;
vertical-align: middle;
cursor: pointer;
background-image: url(../../../common/images/radio.png);
background-repeat: no-repeat;
background-position: 0 0;
}
.input-radio {
display: inline-block;
position: absolute;
opacity: 0;
width: 25px;
height: 25px;
cursor: pointer;
left: 0px;
outline: none;
-webkit-appearance: none;
}
.on {
background-position: -25px 0;
}
