项目场景:
有两个选项A、B 只能选择一个 单选按钮组组件无疑
附加需求:当再次点击按钮组选中项时 取消选择
参考文献
原因分析:
主要就是 @click.native.prevent 的运用,直接使用 @click 无法监听到 点击 事件, 需要使用 原生click 事件, 后面加上 .prevent 会阻止后续事件的触发(比如使用后 el-radio 的change 事件 就不会触发了)
解决方案:
// vue
<el-radio-group v-model="radioVal" :key="radioKey">
<el-radio :label="1" @click.native.prevent="changeRadio(1)">已接听</el-radio>
<el-radio :label="2" @click.native.prevent="changeRadio(2)">未接听</el-radio>
</el-radio-group>
//data
return {
radioKey: false,
radioVal:''
}
//methods
changeRadio(val) {
this.radioVal= this.radioVal== val ? '' : val
this.radioKey= ! this.radioKey
},