Element-UI Radio 取消選中

一、前言

在項目中，用的展示幾個模塊。首先默認會顯示一些內容，用單選框選擇其他幾個模塊（這里是用單選框做的）。

現在的新需求是，可以恢復到默認顯示的內容。但是 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
     // 選中操作
    }

這樣就達到需求的效果