Element Radio组件 点击取消选择

项目场景：

有两个选项A、B 只能选择一个  单选按钮组组件无疑

附加需求：当再次点击按钮组选中项时 取消选择

---

参考文献

Element - The world's most popular Vue UI framework

---

原因分析：

主要就是 @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
},