一个因@click.stop引发的bug的解决
问题
在项目页面中使用elementpopover,设置trigger='click'时点击外部不会触发自动隐藏,但在element官网中是可以正常触发的(官方示例),项目中的菜单是自定义写的,所以怀疑是有黑魔法。
查找原因
- 将popover写在app.vue根组件内,发现可以正常触发自动隐藏。
- 在app.vue的mounted钩子中加入window.addEventListener('click',()=>console.log('windowclick===>>>>')),发现只有菜单栏外层能够触发。
- 检查菜单栏组件,发现代码中
,这里的click事件使用了stop修饰符(阻止冒泡),可能阻止了popover外部点击的事件判断,尝试将stop修饰符去掉,发现外部点击事件正常触发。
确认代码修改没有副作用
在修复bug时,需要注意不会产生额外的bug,那就需要了解修改的这段代码的含义
@click.stop="isShowWhole=false"
从代码上看,点击class为main的div将会触发左边侧边栏缩略显示,加上stop修饰符是为了防止事件冒泡,所以能否去掉stop需要确认是否有这个必要。
//router.js letroutes=[ { path:'/', alias:'/admin', component:Menu, children:[...Pages], }, { path:'*', name:'404', component:NotFound, }, ];
在路由中可以看到,Menu是作为根路由进行渲染,除了404页面都是它的子路由,所以stop修饰符是没有必要加上的,去除后经过测试没有其他影响。
深入elementpopover源码分析原因
对element组件进行debug时,可以直接引入相关组件的源码
importElPopoverfrom'element-ui/packages/popover'; exportdefault{ components:{ CheckboxFilter, ElPopover }, ... }
然后我们就可以在node_modules的element源码进行debug操作(危险步骤,debug后需要复原)。
//node_modules/element-ui/packages/popover/src/main.vue mounted(){ ... if(this.trigger==='click'){ on(reference,'click',this.doToggle); on(document,'click',this.handleDocumentClick); }elseif(this.trigger==='hover'){ ... }elseif(this.trigger==='focus'){ ... } }
popover在mounted钩子内初始化了trigger='click'的事件绑定,on(document,'click',this.handleDocumentClick)这里绑定了document很可能就是阻止事件冒泡后不能触发外部点击隐藏的判断逻辑。
//node_modules/element-ui/packages/popover/src/main.vue handleDocumentClick(e){ letreference=this.reference||this.$refs.reference; constpopper=this.popper||this.$refs.popper; if(!reference&&this.$slots.reference&&this.$slots.reference[0]){ reference=this.referenceElm=this.$slots.reference[0].elm; } if(!this.$el|| !reference|| this.$el.contains(e.target)|| reference.contains(e.target)|| !popper|| popper.contains(e.target))return; this.showPopper=false; },
这里判断this.$el是否包含click的target,从而是否触发this.showPopper=false,当菜单栏阻止事件冒泡后document不能监听到click事件,才会无法进行外部点击隐藏的判断逻辑。
延伸v-clickoutside
element的select组件中用到了v-clickoutside自定义指令,作用和popover的handleDocumentClick差不多(倒不如说handleDocumentClick是特殊的clickoutside)
在上面的问题中,我们单独把v-clickoutside抽出来使用确实可以的,这是为什么呢?
//node_modules/element-ui/packages/popover/src/utils/clickoutside.js !Vue.prototype.$isServer&&on(document,'mousedown',e=>(startClick=e)); !Vue.prototype.$isServer&&on(document,'mouseup',e=>{ nodeList.forEach(node=>node[ctx].documentHandler(e,startClick)); });
答案是v-clickoutside使用鼠标事件判断的,所以click的阻止冒泡不会让clickoutside无效。
总结
解决bug的过程中需要做到不产生额外的bug,并且深入分析问题的原因有助于能力的提高。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。