vue 解除鼠標(biāo)的監(jiān)聽(tīng)事件的方法
更新時(shí)間：2019年11月13日 09:43:07 作者：那年
這篇文章主要介紹了vue 解除鼠標(biāo)的監(jiān)聽(tīng)事件的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
描述：在移動(dòng)端中，我們的首頁(yè)tab會(huì)緩存一些點(diǎn)擊事件，比如在機(jī)構(gòu)頁(yè)面點(diǎn)開(kāi)了下拉框==》在切換到賽事頁(yè)面==》在切換回機(jī)構(gòu)頁(yè)面發(fā)現(xiàn)下拉款已經(jīng)緩存了，是下拉的狀態(tài)
1.
2.
3.
解決：每次滑動(dòng)到別的頁(yè)面的時(shí)候就需要解除綁定的點(diǎn)擊事件
做法：
1- 首先給父盒子添加 指令:
v-click-outside="hideBox"
2- script標(biāo)簽中 自定義指令
// 自定義指令函數(shù)
const clickOutside = {
// 初始化指令
bind (el, binding, vnode) {
function clickHandler (e) {
// 這里判斷點(diǎn)擊的元素是否是本身，是本身，則返回
if (el.contains(e.target)) {
return false;
}
// 判斷指令中是否綁定了函數(shù)
if (binding.expression) {
// 如果綁定了函數(shù) 則調(diào)用那個(gè)函數(shù)，此處binding.value就是handleClose方法
binding.value(e);
}
}
// 給當(dāng)前元素綁定個(gè)私有變量，方便在unbind中可以解除事件監(jiān)聽(tīng)
el.__vueClickOutside__ = clickHandler;
document.addEventListener('click', clickHandler);
},
update () { },
unbind (el, binding) {
// 解除事件監(jiān)聽(tīng)
document.removeEventListener('click', el.__vueClickOutside__);
delete el.__vueClickOutside__;
},
};
3-在export default 中注冊(cè)自定義指令
// 注冊(cè)自定義指令
directives: { clickOutside },
4- 最后寫(xiě)上需要恢復(fù)下拉的參數(shù)
hideBox () {
this.isSelect = false
this.selectStatus = false
},
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue 使用鼠標(biāo)滾動(dòng)加載數(shù)據(jù)的例子
- vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)動(dòng)畫(huà)
- vue鼠標(biāo)懸停事件實(shí)例詳解
- vue實(shí)現(xiàn)鼠標(biāo)移入移出事件代碼實(shí)例
- vue2.0獲取鼠標(biāo)位置的方法
- vue+mousemove實(shí)現(xiàn)鼠標(biāo)拖動(dòng)功能(拖動(dòng)過(guò)快失效問(wèn)題解決方法)
- 基于vue中對(duì)鼠標(biāo)劃過(guò)事件的處理方式詳解
- Vue.js鼠標(biāo)懸浮更換圖片功能
相關(guān)文章
Vue3中Element-Plus分頁(yè)(Pagination)組件的使用
Element-Plus分頁(yè)(Pagination)組件在開(kāi)發(fā)過(guò)程中數(shù)據(jù)展示會(huì)經(jīng)常使用到,同時(shí)分頁(yè)功能也會(huì)添加到頁(yè)面中,下面我們就來(lái)學(xué)習(xí)一下它的具體使用,需要的可以參考一下2023-11-11
這篇文章主要給大家介紹了關(guān)于webstorm建立vue-cli腳手架的傻瓜式教程，文中通過(guò)圖文介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
vue+express 構(gòu)建后臺(tái)管理系統(tǒng)的示例代碼
這篇文章主要介紹了vue+express 構(gòu)建后臺(tái)管理系統(tǒng)的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
今天小編就為大家分享一篇對(duì)vue中的事件穿透與禁止穿透實(shí)例詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
vue使用echarts詞云圖的實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于vue使用echarts詞云圖的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
下面小編就為大家分享一篇elementui的默認(rèn)樣式修改方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助，一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue.js watch經(jīng)常失效的場(chǎng)景與解決方案
這篇文章主要給大家介紹了關(guān)于vue.js watch經(jīng)常失效的場(chǎng)景與解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要為大家介紹了Pinia介紹及工作原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了將Vue組件庫(kù)更換為按需加載的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹了Vue組件解析之如何自定義彈窗組件ByDialog問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01