在网上找了很久也没有找到自己想要的解决方案,于是乎自己便想了一个简单粗暴的解决方案。首先考虑radio
是单选框,且vue的v-model
赋值速度非常的快,取消选择又不会触发 radio
的 change
事件,使用click
事件去单纯的修改值会导致选中值瞬间勾选与取消了勾选。达不到想要的效果,可以考虑这种情形,因为radio
的双向绑定,值是瞬间变化的,所以可以用一个 oldValue
去保留上一次点击选中的值,这样去勾选时就不会影响到 oldValue
,保留拿到了oldValue
值后,用 oldValue
去与现在的点击事件想要选中 / 取消 的值进行比对。话不多说,直接上代码,以 vant-ui
为例(PS:其他的我个人认为不是逻辑层的框架代码,这种方案应该也是同理可解的)
<template>
<van-radio-group v-model="radio">
<van-radio :name="item" v-for='(item,index) in list' @click="select(item)">单选框 {{item}}</van-radio>
</van-radio-group>
</template>
<script>
export default{
name:'xxx',
data(){
return {
list:[1,2,3,4,5],//模拟数据
radio:0, // radio双向绑定值 如果想要默认选中,修改初始值就行 ,这里我默认不选中,所以为0
oldRadio:0, // 上一次选中的值
}
},
methods:{
select(item){
if(item == this.oldRadio){
// 取消选中 将 radio、oldRadio的值重置为0。oldRadio 重置是为了防止下次点中与新选中的值相同而判断错误
this.radio = 0;
this.oldRadio = 0;
}else{
// 选择了新的值,保留此次选择的值,用于下次对比
this.oldRadio = item
}
}
}
}
</script>
以上为纯手打。大家可自行copy直接运行。