如题,需求如此, 使用的 vueui 框架 elementUI ,需要实现 radio 再次点击可以取消选中状态


<el-radio-group v-model="radioValue">
  <el-radio 
    @click.native.prevent="handleRadioClick(1)" 
    :label="1">备选项1</el-radio>
  <el-radio 
    @click.native.prevent="handleRadioClick(2)" 
    :label="2">备选项2</el-radio>
  <el-radio 
    @click.native.prevent="handleRadioClick(3)" 
    :label="3">备选项3</el-radio>
</el-radio-group>

handleRadioClick(val) {
  this.radioValue === val ? this.radioValue = '' : this.radioValue = val
},

主要就是 @click.native.prevent 的运用,直接使用 @click 无法监听到 点击 事件, 需要使用 原生click 事件, 后面加上 .prevent 会阻止后续事件的触发(比如使用后 el-radiochange 事件 就不会触发了

最后修改:2021 年 04 月 16 日
如果觉得我的文章对你有用,请随意赞赏或留下你的评论~