有这个需求,然后查到一堆没一个有用的,结合各个答案有用的部分最终测出来有用的代码。
解决思路:监听Radio点击然后修改v-model绑定的值,置空该值以此取消选中
解决方法:
- Radio上添加native原生点击事件,但会出现点击后事件触发两次的问题;
- 计算点击间隔然后只保留一次有效点击(有坑,具体看代码注释);
- 然后直接改v-model绑定的值置空(试过ref拿元素改currentValue没用);
代码:
//template
<RadioGroup v-model="radioValue">
<Radio
@click.native="onRadioCancel($event,ritem)"
:label="ritem.value"
v-for="(ritem,rkey,rindex) in radioList" :key="rindex">
{{ritem.label}}
</Radio>
</RadioGroup>
//方法
onRadioCancel(e, item) {
// 两次点击间隔时间小于100ms则判断是同一次点击
let now = +new Date();
if (now- this.evTimeStamp < 100) {
e.preventDefault(); //坑坑坑,重点!!! 阻止二次默认事件,不然取消了选中又会被选上
return;
}
this.evTimeStamp = now;
this.radioValue = this.radioValue===item.value?'':item.value;
}