如何在vue中解除鼠标的监听事件 - 行业资讯 - 肥雀云

　　介绍

如何在vue中解除鼠标的监听事件?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

1 -首先给父盒子添加指令:

v-click-outside=癶ideBox"

如何在vue中解除鼠标的监听事件

2 -脚本标签中自定义指令

//,自定义指令函数　　const clickOutside =, { 　　,//初始化指令　　,bind (el,绑定,vnode), { 　　function 才能;clickHandler (e), { 　　,,//,这里判断点击的元素是否是本身,是本身,则返回　　,,if (el.contains (e。target)), { 　　,,,return 假; 　　,,} 　　,,//,判断指令中是否绑定了函数　　,,if (binding.expression), { 　　,,,//,如果绑定了函数,则调用那个函数,此处binding.value就是handleClose方法　　,,,binding.value (e); 　　,,} 　　,,}//,才能给当前元素绑定个私有变量,方便在解放中可以解除事件监听　　时间=el.__vueClickOutside__ 才能;clickHandler; 　　document.addEventListener才能(& # 39;点击# 39;,,clickHandler); 　　}, 　　,update (), {,}, 　　,unbind (el,绑定),{//,才能解除事件监听　　document.removeEventListener才能(& # 39;点击# 39;,,el.__vueClickOutside__); 　　delete 才能;el.__vueClickOutside__; 　　}, 　　};

3 -在出口违约中注册自定义指令

,//,注册自定义指令　　,指令:{},clickOutside ,

4 -最后写上需要恢复下拉的参数

, hideBox (), { 　　,,this.isSelect =false 　　,,this.selectStatus =false 　　,,}, Vue的优点

Vue具体轻量级框架,简单易学,双向数据绑定,组件化,数据和结构的分离,虚拟DOM,运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和DOM,可以大大提升访问速度和用户体验。

看完上述内容,你们掌握如何在Vue中解除鼠标的监听事件的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注行业资讯频道,感谢各位的阅读!