运维开发网

vue项目实现点击目标区域之外可关闭

运维开发网 https://www.qedev.com 2022-04-27 15:31 出处:网络
这篇文章主要介绍了vue项目实现点击目标区域之外可关闭(隐藏)目标区域,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

这篇文章主要介绍了vue项目实现点击目标区域之外可关闭(隐藏)目标区域,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教


点击目标区域之外可关闭目标区域


解决思路


方法一

1.带有myPanel类的vue module-div的内容是我们想要处理的小部件。

lt;templategt;? ? lt;div class="hello"gt;? ? ? ? lt;div class="myPanel" v-if="panelShow"gt;lt;/divgt;? ? lt;/divgt;lt;/templategt;

2.定义点击事件——在life cycle的hook函数中直接添加点击事件(挂载DOM后),通过判断目标元素的类名就可以达到相应的效果。

mounted(){? ? document.addEventListener('click', (e)=gt; {? ? ? ? if (e.target.className != 'myPanel') {? ? ? ? ? ? this.panelShow= false;? ? ? ? }? ? })}


方法二

1.带有myPanel类的vue module-div的内容是我们想要处理的小部件。其中,stop修饰符用于阻止函数的转移。简单理解就是执行自身绑定的事件,不影响其他地方绑定的事件。在这里,clickPanel函数中什么都不能做,它只是用来防止click事件传递给绑定到正文的click事件。

lt;templategt;? ? lt;div class="hello"gt;? ? ? ? lt;div @click.stop="clickPanel" class="myPanel" v-if="panelShow"gt;lt;/divgt;? ? lt;/divgt;lt;/templategt;

2.通过watch监视panelShow的值,对应于体中绑定/解除绑定的点击事件。

watch: {? panelShow(val) {? ? if(val) {? ? ? document.body.addEventListener('click', () =gt; {? ? ? ? ? this.panelShow = false;? ? ? })? ? } else {? ? ? document.body.removeEventListener('click', () =gt; {});? ? }? }}

注意:您也可以将一个click事件绑定到主体,然后确定被单击的元素是否是需要隐藏的元素。


vue点击组件外部隐藏组件自身

开发一个组件时,常见的是点击组件外部隐藏组件本身,例如时间选择框组件、下拉选项等。


示图:点击外层元素隐藏自定义车牌选择框



代码如图中所写




核心

1.在最外层的div中添加一个@click.stop(以取消事件冒泡),您可以不使用事件名称。

2.将click事件添加到已安装的几何体中。该事件触发组件的隐藏。

document.body.addEventListener('click', () =gt; { this.show = false; }, false);

以上个人经验,希望能给你一个参考,也希望你能支持一下搜源网。


0

精彩评论

暂无评论...
验证码 换一张
取 消