微客导航 » 文章资讯 » Vue指令实现OutClick的示例

Vue指令实现OutClick的示例

2023-07-11 17:35:06 178

原始实现

下面是两种常见的模态框的实现方式

方案一：默认click都是放在冒泡阶段，只要在内容区域上添加click的阻止冒泡即可



modalcontent

方案二：通过代码判断点击触发的DOM是否在内容区域内


modalcontent

handleClick(e){ letclickOut=true lettemp=e.target do{ if(temp===this.$refs.content){ clickOut=false break } temp=temp.parentElement }while(temp!==document.documentElement) console.log(clickOut) }

指令实现

上面的代码可以解决全屏的模态框点击外部区域关闭。但是还有一种Pop的弹出，这种弹出的外部区域不在本组件内，想要实现这种弹出的点击外部区域关闭用上面的方式二也是可以的，只需把mounted阶段把handleClick事件添加到body，在beforeDestroy上解绑body上的点击时间就就可以了。

如果多个组件需要实现这点击外部区域关闭的效果，可以通过Vue的指令来进行封装

实现弹窗


modalcontent

实现弹出

显示气泡
I'mpoptext

指令代码的具体内容如下。有一点比较难受的是指令里面没有地方能存放变量，只好把把这些变量放到了DOM上了。还有就是在使用的时候要加上v-的前缀，指令的名字不用带上v-

importoutClickfrom'./directive/out-click.js'
Vue.directive(outClick.name,outClick)
constKEY_OUT='_out_click'
constKEY_OUT_EVENT='_out_click_event'
constKEY_IN='_in_click'
constKEY_FLAG='_in_out_flag'

functionremoveEvent(el,binding,vnode){
el.removeEventListener('click',el[KEY_IN],false)
window.removeEventListener('click',el[KEY_OUT],false)
deleteel[KEY_IN]
deleteel[KEY_OUT]
deleteel[KEY_OUT_EVENT]
deleteel[KEY_FLAG]
}

functioninitEvent(el,binding,vnode){
//setTimeout0:忽略点击外部的按钮初始化该组件时，触发的originclick
setTimeout(()=>{
el[KEY_OUT]=()=>outClick(el)
el[KEY_IN]=()=>inClick(el)
el[KEY_OUT_EVENT]=binding.value
el.addEventListener('click',el[KEY_IN],false)
window.addEventListener('click',el[KEY_OUT],false)
},0)
}

functioninClick(el){
//通过事件捕获的顺序作为标志位
//最好不要使用阻止冒泡来实现，那样会影响其他的click无法触发
el[KEY_FLAG]='1'
}

functionoutClick(el){
if(!el[KEY_FLAG]&&el[KEY_OUT_EVENT]){
el[KEY_OUT_EVENT]()
}
deleteel[KEY_FLAG]
}

exportdefault{
name:'out-click',
update:(el,binding,vnode)=>{
if(binding.value===binding.oldValue){
return
}
removeEvent(el,binding,vnode)
initEvent(el,binding,vnode)
},
bind:initEvent,
unbind:removeEvent
}

以上就是Vue指令实现OutClick的示例的详细内容，更多关于Vue指令实现OutClick的资料请关注毛票票其它相关文章！

返回顶部
3162201930
czq8825@qq.com

Vue指令实现OutClick的示例

热门推荐

随机推荐