摘要:概述庫用的是是我們非常常用的組件。有一個(gè)特征是選中之后無法取消?,F(xiàn)實(shí)中取消的需求是常見且可以理解的。所以看到這個(gè)需求之后第一嘗試在組件之上搞一搞,這一搞就入坑了,現(xiàn)在就來理一理我的入坑之路吧。
概述
ui庫用的是iview .
radio、radioGroup是我們非常常用的組件。radio有一個(gè)特征是選中之后無法取消?,F(xiàn)實(shí)中取消radio的需求是常見且可以理解的。
所以看到這個(gè)需求之后第一嘗試 在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。
2. iview中radio取消之路借鑒原生的radio,看來取消也不難嘛,監(jiān)聽radio或者 radio的change事件嘛。然而你會發(fā)現(xiàn),重復(fù)點(diǎn)選某一個(gè) radio的時(shí)候,iview中的on-change函數(shù)跟本木有響應(yīng)。這是為什么呢? 去 iview 源碼中看一看
2.1 iview組件radio源碼探究先上代碼為敬:
先看下 radio.vue的 template
{{ label }}
再看下 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做了處理,只有 不一樣的時(shí)候才
emit,仔細(xì)看,change函數(shù)中并沒有這部分處理。
問題在于 input 這里監(jiān)聽的 change 事件而不是 click事件,所以反復(fù)點(diǎn)擊同一個(gè) radio的時(shí)候沒有 響應(yīng)是正常的。
看到上面是不是就想 我在 radio上綁定一個(gè)click 事件就可以了;事實(shí)證明是不可以的,想一下就知道了,因?yàn)?iview并沒有監(jiān)聽click事件自然也沒有把click事件 emit到父組件,所以是無法監(jiān)聽click的。
既然 Radio 不支持click,那就想辦法在能讓元素響應(yīng) click 唄
這里的思路是在 RadioGroup的Radio 外包裹一層 div/span,在這個(gè)元素上綁定 click 函數(shù),這個(gè)元素肯定會響應(yīng) click,在響應(yīng)函數(shù)中判斷 當(dāng)前 選中的 value(這個(gè)變量通常會維護(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)致無法取消。 還有一個(gè)弊端是 需要給 Radio增加一個(gè)包裹元素,可能還需要對元素寫個(gè)樣式,不要影響到原Radio 元素布局, 那么還有沒有更好的方法呢?
vue中提供了監(jiān)聽原生事件的修飾符,在jsx形式的vue監(jiān)聽原生事件的寫法如下:
{label}
所以我們不用增加元素也能監(jiān)聽到click事件,接下里就可以在響應(yīng)函數(shù)中 處理取消/選中的邏輯了。
2.2.3 Radio 怎么響應(yīng)了2次?嗯, 終于找到一個(gè)很好的綁定 click的方法,然而測試的時(shí)候,卻發(fā)現(xiàn) 點(diǎn)擊一次卻響應(yīng)了 兩次點(diǎn)擊函數(shù),百思不得其解嗎? 這時(shí)候 baidu 或者google給了我們答案: 一個(gè)文章說的特別好,解釋了兩次的原因:
如下文章鏈接:
觸發(fā)的事件源分別為input和label;
觸發(fā)條件很簡單:
1、監(jiān)聽的是label和input的上層元素click事件
2、label和input關(guān)聯(lián)(for或者input在label下)
問題原因::
點(diǎn)擊label的時(shí)候,事件冒泡一次,同時(shí)會觸發(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ā)的時(shí)間戳來判斷,相隔太近則認(rèn)為是一次點(diǎn)擊。
2.3 Radio/RadioGroup 可取消完整方案有了上面的分析,下面我們完整是總結(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 可以取消了。
遇到問題歡迎評論提問,不足之處也歡迎指正。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/109184.html
摘要:如圖所示還有其它很多項(xiàng)的更新,比如新增屬性,可以設(shè)置面板展開時(shí)默認(rèn)顯示的日期。目前最新版本支持鍵盤可訪問性的組件有。期待你的加入下個(gè)版本預(yù)告下個(gè)版本計(jì)劃重構(gòu)組件,以全面支持表單組件的鍵盤可訪問性,敬請期待。 在過去的兩個(gè)多月里,iView 陸續(xù)發(fā)布了 2.9.0 和 2.10.0 兩個(gè)重要版本。這兩個(gè)版本總共有 255 個(gè) commit,超過 40 項(xiàng)更新。來看一下,iView 具體都...
摘要:相當(dāng)于可以編輯問卷并提供問卷展示,數(shù)據(jù)統(tǒng)計(jì)的這么一個(gè)平臺。極大的節(jié)省了需要進(jìn)行表單樣式修改的時(shí)間,同時(shí),讓動態(tài)渲染表單成為一件可能且容易的事情。表單動態(tài)渲染剛好在項(xiàng)目之前,有過一次動態(tài)配置表單的嘗試通過字段自動生成表單及驗(yàn)證。 近幾天來了個(gè)緊急項(xiàng)目,想要做一個(gè)內(nèi)部版本的問卷星。相當(dāng)于可以編輯問卷并提供問卷展示,數(shù)據(jù)統(tǒng)計(jì)的這么一個(gè)平臺。整個(gè)項(xiàng)目耗時(shí)不長,本著積淀和積累的原則,將過程中的...
閱讀 1317·2021-10-27 14:14
閱讀 3574·2021-09-29 09:34
閱讀 2477·2019-08-30 15:44
閱讀 1715·2019-08-29 17:13
閱讀 2569·2019-08-29 13:07
閱讀 867·2019-08-26 18:26
閱讀 3342·2019-08-26 13:44
閱讀 3210·2019-08-26 13:37