vue 解除鼠標(biāo)的監(jiān)聽事件的方法
更新時間：2019年11月13日 09:43:07 作者：那年
這篇文章主要介紹了vue 解除鼠標(biāo)的監(jiān)聽事件的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
描述：在移動端中，我們的首頁tab會緩存一些點擊事件，比如在機構(gòu)頁面點開了下拉框==》在切換到賽事頁面==》在切換回機構(gòu)頁面發(fā)現(xiàn)下拉款已經(jīng)緩存了，是下拉的狀態(tài)
1.
2.
3.
解決：每次滑動到別的頁面的時候就需要解除綁定的點擊事件
做法：
1- 首先給父盒子添加 指令:
v-click-outside="hideBox"
2- script標(biāo)簽中 自定義指令
// 自定義指令函數(shù)
const clickOutside = {
// 初始化指令
bind (el, binding, vnode) {
function clickHandler (e) {
// 這里判斷點擊的元素是否是本身，是本身，則返回
if (el.contains(e.target)) {
return false;
}
// 判斷指令中是否綁定了函數(shù)
if (binding.expression) {
// 如果綁定了函數(shù) 則調(diào)用那個函數(shù)，此處binding.value就是handleClose方法
binding.value(e);
}
}
// 給當(dāng)前元素綁定個私有變量，方便在unbind中可以解除事件監(jiān)聽
el.__vueClickOutside__ = clickHandler;
document.addEventListener('click', clickHandler);
},
update () { },
unbind (el, binding) {
// 解除事件監(jiān)聽
document.removeEventListener('click', el.__vueClickOutside__);
delete el.__vueClickOutside__;
},
};
3-在export default 中注冊自定義指令
// 注冊自定義指令
directives: { clickOutside },
4- 最后寫上需要恢復(fù)下拉的參數(shù)
hideBox () {
this.isSelect = false
this.selectStatus = false
},
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue-cli使用rem,vue自適應(yīng)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章手把手教你拿捏vue?cale()計算函數(shù)使用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要為大家分享了一款MVVM組件，構(gòu)建自己的Vue組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
本文主要介紹了vue中實現(xiàn)千位分隔符的示例代碼,主要兩種方法,一種是某一個字段轉(zhuǎn)換,一種是表格table中的整列字段轉(zhuǎn)換,具有一定的參考價值,感興趣的可以了解一下2023-11-11
vue+elementUl導(dǎo)入文件方式(判斷文件格式)
這篇文章主要介紹了vue+elementUl導(dǎo)入文件方式(判斷文件格式)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Nuxt引入vue-persistedstate以及踩坑記錄
這篇文章主要介紹了Nuxt引入vue-persistedstate以及踩坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue.js使用$.ajax和vue-resource實現(xiàn)OAuth的注冊、登錄、注銷和API調(diào)用
這篇文章主要介紹了 Vue.js使用$.ajax和vue-resource實現(xiàn)OAuth的注冊、登錄、注銷和API調(diào)用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了vue.js 初體驗之Chrome 插件開發(fā)實錄 ,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了webpack4打包vue前端多頁面項目的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
本篇文章主要分享了Vue實現(xiàn)購物車功能的實例代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04