摘要：概述庫用的是是我們非常常用的組件。有一個特征是選中之后無法取消。現(xiàn)實(shí)中取消的需求是常見且可以理解的。所以看到這個需求之后第一嘗試在組件之上搞一搞，這一搞就入坑了，現(xiàn)在就來理一理我的入坑之路吧。

ui庫用的是iview .
radio、radioGroup是我們非常常用的組件。radio有一個特征是選中之后無法取消。現(xiàn)實(shí)中取消radio的需求是常見且可以理解的。
所以看到這個需求之后第一嘗試 在iview組件之上搞一搞，這一搞就入坑了，現(xiàn)在就來理一理我的入坑之路吧。

首先我們來看一下在 vue 中使用原生的radio組件如何使用取消。 原生radio取消選中的文章非常多，隨便拎一篇看看就行，比如 取消radio的三種方法。
嗯，原理就是給radio元素的checked屬性賦值為 false。
具體在 vue 中使用是這樣的:

const { name, value } = data;

     this.radioGroupChange(value, name)}
    />
    {name}
;

// 方法
radioGroupChange (value, name) {
    if (this.checked === value) {
        // 取消選中
        this.$refs[name].checked = false;
        // 當(dāng)前選中值為空
        this.checked = "";
    } else {
        this.checked = value;
    }
}

這樣就OK了。大概唯一區(qū)別是 在 vue中通過 ref取到真實(shí) dom。

借鑒原生的radio，看來取消也不難嘛，監(jiān)聽radio或者 radio的change事件嘛。然而你會發(fā)現(xiàn)，重復(fù)點(diǎn)選某一個 radio的時候，iview中的on-change函數(shù)跟本木有響應(yīng)。這是為什么呢？ 去 iview 源碼中看一看

先上代碼為敬:
先看下 radio.vue的 template

再看下 change的響應(yīng)函數(shù)

 change (event) {
    // debugger
    if (this.disabled) {
        return false;
    }

    const checked = event.target.checked;
    this.currentValue = checked;

    const value = checked ? this.trueValue : this.falseValue;
    this.$emit("input", value);

    if (this.group) {
        if (this.label !== undefined) {
            this.parent.change({
                value: this.label,
                checked: this.value
            });
        }
    } else {
        this.$emit("on-change", value);
        this.dispatch("FormItem", "on-form-change", value);
    }
},

一開始懷疑 change事件中對 value做了處理，只有 不一樣的時候才

emit，仔細(xì)看，change函數(shù)中并沒有這部分處理。
問題在于 input 這里監(jiān)聽的 change 事件而不是 click事件，所以反復(fù)點(diǎn)擊同一個 radio的時候沒有 響應(yīng)是正常的。

看到上面是不是就想 我在 radio上綁定一個click 事件就可以了；事實(shí)證明是不可以的，想一下就知道了，因?yàn)?iview并沒有監(jiān)聽click事件自然也沒有把click事件 emit到父組件，所以是無法監(jiān)聽click的。
既然 Radio 不支持click，那就想辦法在能讓元素響應(yīng) click 唄

這里的思路是在 RadioGroup的Radio 外包裹一層 div/span，在這個元素上綁定 click 函數(shù)，這個元素肯定會響應(yīng) click，在響應(yīng)函數(shù)中判斷 當(dāng)前 選中的 value(這個變量通常會維護(hù)在data中，暫且用 this.value 表示) 和點(diǎn)擊元素包裹的 value 值是否相同，相同則將 this.value 置為空，則可以達(dá)到取消的效果。
經(jīng)過實(shí)踐，該方法是可行的。 值得注意的是這種情況下需要取消RadioGroup的on-change事件監(jiān)聽，否則radio改變了this.value，會觸發(fā)RadioGroup的on-change事件，導(dǎo)致無法取消。 還有一個弊端是 需要給 Radio增加一個包裹元素，可能還需要對元素寫個樣式，不要影響到原Radio 元素布局， 那么還有沒有更好的方法呢？

vue中提供了監(jiān)聽原生事件的修飾符，在jsx形式的vue監(jiān)聽原生事件的寫法如下:

    {label}

所以我們不用增加元素也能監(jiān)聽到click事件，接下里就可以在響應(yīng)函數(shù)中 處理取消/選中的邏輯了。

嗯， 終于找到一個很好的綁定 click的方法，然而測試的時候，卻發(fā)現(xiàn) 點(diǎn)擊一次卻響應(yīng)了 兩次點(diǎn)擊函數(shù)，百思不得其解嗎？ 這時候 baidu 或者google給了我們答案： 一個文章說的特別好，解釋了兩次的原因：
如下文章鏈接:
觸發(fā)的事件源分別為input和label；

觸發(fā)條件很簡單：

1、監(jiān)聽的是label和input的上層元素click事件

2、label和input關(guān)聯(lián)（for或者input在label下）

問題原因：：

點(diǎn)擊label的時候，事件冒泡一次，同時會觸發(fā)關(guān)聯(lián)的input的click事件，導(dǎo)致事件再次冒泡。

解決辦法：
方法有很中拉，

2次響應(yīng)由 label造成，那我們不要label了，這對于使用iview的情況下是不可能的，因?yàn)閕view就是使用 label 和 input 做的

響應(yīng)函數(shù)里判斷event的 tagName ，如果 tagName 為 label則不做處理，這中方法問題很多，要做 event的瀏覽器兼容，還有判斷l(xiāng)abel有沒有關(guān)聯(lián) input等，稍顯復(fù)雜

根據(jù)通過事件觸發(fā)的時間戳來判斷，相隔太近則認(rèn)為是一次點(diǎn)擊。

有了上面的分析，下面我們完整是總結(jié)一下 讓radio可以取消的步驟：
注意: 我下面寫的是 vue的jsx 形式，所以如果是vue形式，請自行修改。
首先： template

 
    
        {label}
    
    
        {label}
    

data 和 methods:

data() {
    return {
        value: ""
    }
}
methods: {
    handleRadioClick (value) {
        let now = +new Date();
        if (now- this.evTimeStamp < 100) {
            return;
        }
        this.evTimeStamp = now;
        value = this.value === value ? "" : value;
        this.update(value);  // 可以理解為vuex 通知更新  this.value
    },
}

限于本身實(shí)現(xiàn)還有其他關(guān)聯(lián)部分，這里沒有加上 更新 this.value具體代碼，但是我相信看到這里應(yīng)該已經(jīng)知在使用 ui 庫的情況如何 是 radio 可以取消了。

遇到問題歡迎評論提問，不足之處也歡迎指正。