Element-UI Radio 取消选中

Posted 2020-12-14 zhurong

一、前言

在项目中，用的展示几个模块。首先默认会显示一些内容，用单选框选择其他几个模块（这里是用单选框做的）。

现在的新需求是，可以恢复到默认显示的内容。但是 Radio 单选后再点击自己不会取消（笑哭~~）。

所以就找曲线实现这个功能。

二、Change 事件

Radio 暴露出来的只有一个 change 事件。那就先看这个事件能不能实现。

通过调试发现：点击已经选择的 Radio ，不会触发 Change 事件。

那么用这个就不能实现取消的功能。

三、原生 Click 事件

既然组件本身暴露出来的 Change 事件不行，那么就通过原生事件。

添加原生事件：click.native.prevent

<el-radio v-model="activeModel" label="flood" @click.native.prevent="onRadioChange(‘flood‘)">显示</el-radio>

对应的 onRadioChange 里面做修改：

    onRadioChange(e) {
     // 当点击已经选中的把 activeModel 置空，就是取消选中，并返回
      if (this.activeModel === e) {
        this.activeModel = ‘‘
        return
      }
     // 不是选中，选中当前点击 Radio
      this.activeModel = e
     // 选中操作
    }

这样就达到需求的效果