vue 解除鼠标的监听事件的方法
更新时间：2019年11月13日 09:43:07 作者：那年
这篇文章主要介绍了vue 解除鼠标的监听事件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
描述：在移动端中，我们的首页tab会缓存一些点击事件，比如在机构页面点开了下拉框==》在切换到赛事页面==》在切换回机构页面发现下拉款已经缓存了，是下拉的状态
1.
2.
3.
解决：每次滑动到别的页面的时候就需要解除绑定的点击事件
做法：
1- 首先给父盒子添加 指令:
v-click-outside="hideBox"
2- script标签中 自定义指令
// 自定义指令函数
const clickOutside = {
// 初始化指令
bind (el, binding, vnode) {
function clickHandler (e) {
// 这里判断点击的元素是否是本身，是本身，则返回
if (el.contains(e.target)) {
return false;
}
// 判断指令中是否绑定了函数
if (binding.expression) {
// 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
binding.value(e);
}
}
// 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
el.__vueClickOutside__ = clickHandler;
document.addEventListener('click', clickHandler);
},
update () { },
unbind (el, binding) {
// 解除事件监听
document.removeEventListener('click', el.__vueClickOutside__);
delete el.__vueClickOutside__;
},
};
3-在export default 中注册自定义指令
// 注册自定义指令
directives: { clickOutside },
4- 最后写上需要恢复下拉的参数
hideBox () {
this.isSelect = false
this.selectStatus = false
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Vue3中Element-Plus分页(Pagination)组件的使用
Element-Plus分页(Pagination)组件在开发过程中数据展示会经常使用到,同时分页功能也会添加到页面中,下面我们就来学习一下它的具体使用,需要的可以参考一下2023-11-11
这篇文章主要给大家介绍了关于webstorm建立vue-cli脚手架的傻瓜式教程，文中通过图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
这篇文章主要介绍了vue+express 构建后台管理系统的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
今天小编就为大家分享一篇对vue中的事件穿透与禁止穿透实例详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要给大家介绍了关于vue使用echarts词云图的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
下面小编就为大家分享一篇elementui的默认样式修改方法，具有很好的参考价值，希望对大家有所帮助，一起跟随小编过来看看吧2018-02-02
这篇文章主要给大家介绍了关于vue.js watch经常失效的场景与解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章主要为大家介绍了Pinia介绍及工作原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了将Vue组件库更换为按需加载的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了Vue组件解析之如何自定义弹窗组件ByDialog问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
最新评论