正常情况下radio不支持取消勾选,需要触发原生的点击事件来取消勾选
不管是在原生JavaScript情况下还是vue,react,uniapp的框架上,都能相应的实现其功能
<template lang="pug">
div
el-radio(v-model="radio" label="1" @click.native.prevent="onRadioChange('1')") 备选项1
el-radio(v-model="radio" label="2" @click.native.prevent="onRadioChange('2')") 备选项2
</template>
<script>
export default {
data() {
return {
radio: "1",
};
},
methods:{
onRadioChange(e){
// 当点击已经选中的把 radio 置空,就是取消选中,并返回
if (this.radio === e) {
this.radio = ''
return
}
// 不是选中,选中当前点击 Radio
this.radio = e
}
}
};
</script>