vue 点击 除某元素以外的区域关闭弹窗

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 点击 除某元素以外的区域关闭弹窗相关的知识,希望对你有一定的参考价值。

参考技术A 点击向下的箭头上面有几页的那部分显示,点击其他地方那部分隐藏,本来是没有头绪的,后来看到一个暴躁老哥的博客上有 https://blog.csdn.net/xingyu_qie/article/details/78831045 ,就借鉴了一下(看不懂我的可以看他的,他的写的还比较详细)

这边主要是hidePanel这个函数 在你的点击元素的父元素上加上这个函数,判断你点击的部分是不是这个点击元素
data里有一个变量控制显隐

computeHeight 这个函数是计算弹出部分的高,从而设置他position 的 top ,
这里因为是涉及到重新渲染视图,所以需要等渲染完成之后更改再获取高度(不然获取到的是更新视图之前的高度,更新之前那部分是隐藏的,高度永远为0),需要用到

这边着重记一下这次学到的小东西:
如果是要有条件的触发某点击事件,可以这样:

&&符号前面是条件,后面是你要触发的函数 这里我要触发两个函数,所以用逗号隔开(ps:分号是没用的哦)

以上是关于vue 点击 除某元素以外的区域关闭弹窗的主要内容,如果未能解决你的问题,请参考以下文章

js 点击弹窗以外 关闭弹窗

页面设置弹窗,点击其他区域,弹窗关闭

关于点击空白关闭弹窗的js写法推荐?

vue点击菜单以外区域,隐藏菜单操作

vue 如何设置点击空白处的遮罩层关闭弹窗

点击空白关闭弹窗