Bug report（問(wèn)題描述）

當(dāng)用戶(hù)給一個(gè)元素（如按鈕元素）添加v-waves指令后，如果用戶(hù)再給元素添加一個(gè)click事件句柄，而且這個(gè)句柄在執(zhí)行時(shí)觸發(fā)了組件的更新，那么按鈕的“波動(dòng)”效果就會(huì)失效。

Steps to reproduce（問(wèn)題復(fù)現(xiàn)步驟）

我用?vue-element-admin?項(xiàng)目?master?分支代碼中的 src/views/table/complex-table.vue 頁(yè)面中的一個(gè)search按鈕作為示例，因?yàn)榇颂幘陀羞@個(gè)bug。

給按鈕元素添加v-waves指令：

<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">Search </el-button>

給按鈕元素添加一個(gè)click事件句柄handleFilter：

handleFilter() {this.listQuery.page = 1this.getList() },getList() {this.listLoading = true // 觸發(fā)更新fetchList(this.listQuery).then(response => {this.list = response.data.itemsthis.total = response.data.total// Just to simulate the time of the requestsetTimeout(() => {this.listLoading = false}, 1.5 * 1000)}) }

其中 this.listLoading = true 語(yǔ)句觸發(fā)了頁(yè)面組件的更新。

頁(yè)面組件的更新觸發(fā)了v-waves指令的update?hook：
Vue文檔對(duì)自定義指令的鉤子函數(shù)的描述如下：

update：所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒(méi)有。但是你可以通過(guò)比較更新前后的值來(lái)忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見(jiàn)下)。

文檔說(shuō)當(dāng)所在組件的?VNode?更新時(shí)調(diào)用自定義指令的update鉤子，而我所遇到的情況有所不同。
this.listLoading = true 語(yǔ)句觸發(fā)的是頁(yè)面組件的更新，按理說(shuō)el-button組件沒(méi)有資格更新，但事實(shí)是v-waves指令的update鉤子確實(shí)被觸發(fā)了。

忽略這件事情，我們來(lái)看v-waves指令的update鉤子的定義：

update(el, binding) {el.removeEventListener('click', el[context].removeHandle, false)el.addEventListener('click', handleClick(el, binding), false) },

如上所示，第一句刪除了按鈕元素之前添加的click事件監(jiān)聽(tīng)器，從而導(dǎo)致事件監(jiān)聽(tīng)器從始至終都沒(méi)有執(zhí)行，“波動(dòng)”效果當(dāng)然也不會(huì)出現(xiàn)了。

Screenshot or Gif（截圖或動(dòng)態(tài)圖）

其中第一次點(diǎn)擊未出現(xiàn)“波動(dòng)”效果，因?yàn)樗|發(fā)了頁(yè)面更新；而第二次點(diǎn)擊沒(méi)有觸發(fā)更新，所以出現(xiàn)了“波動(dòng)”效果。

Link to minimal reproduction（最小可在線還原demo）

vue-element-admin?項(xiàng)目?master?分支中的 src/views/table/complex-table.vue 頁(yè)面中的?Search?按鈕。

My Suggestion

回顧一下發(fā)生bug的整個(gè)過(guò)程：

用戶(hù)觸發(fā)按鈕的點(diǎn)擊事件。click事件是一個(gè)宏任務(wù)源，它發(fā)布了兩個(gè)宏任務(wù)：@click的handler和?v-waves指令的handler；

@click的handler先執(zhí)行，而它觸發(fā)了頁(yè)面組件的更新。頁(yè)面組件的更新是一個(gè)微任務(wù)源，它發(fā)布了一個(gè)更新組件的微任務(wù)。由于微任務(wù)會(huì)在事件循環(huán)的末尾執(zhí)行完，所以會(huì)先進(jìn)行組件的更新，然后才執(zhí)行v-waves指令的click handler；

頁(yè)面組件更新時(shí)觸發(fā)了v-waves指令的update鉤子，在update鉤子中刪除了之前添加的click事件監(jiān)聽(tīng)器。

所以，我們只要先執(zhí)行v-waves指令的click handler，再刪除click事件監(jiān)聽(tīng)器就行了。

一個(gè)簡(jiǎn)單的方法是延遲到一個(gè)宏任務(wù)中刪除監(jiān)聽(tīng)器：

update(el, binding) {const removeHandler = el[context].removeHandlesetTimeout(_ => {el.removeEventListener('click', removeHandler, false)})el.addEventListener('click', handleClick(el, binding), false) },

轉(zhuǎn)載自：https://github.com/panjiachen/vue-element-admin/issues/2785?

總結(jié)

以上是生活随笔為你收集整理的vue-element-admin的v-waves指令失效问题解决（与@click冲突导致水波纹失效）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。