这篇文章主要介绍了Vue实现 点击显示 再点击隐藏 点击页面空白区域也隐藏效果,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
平时项目中，经常会做一些下拉菜单等效果，这种效果可能会需要通过一个按钮来控制显示隐藏，并且当点击页面其他空白区域时，也要将其隐藏。
简单写个Demo
内容{{index}}
@click.stop="" 为组织冒泡
data中定义ShowHidden
data () { return { ShowHidden: false } },mounted中写上下方代码，点击页面事件
mounted () { document.addEventListener('click', this.HiddenClick) },methods中写入下方代码
methods: { // 点击页面事件 隐藏需要隐藏的区域 HiddenClick () { this.ShowHidden = false }, // 点击列表内，选中内容，并隐藏 ConBtn (val) { alert('内容' + val) this.ShowHidden = false } }这样，一个简单的效果就实现了，如果页面中需要使用多，那么方法一样，只需在要点击显示事件中，执行一次让其他下拉隐藏即可
总结
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
以上就是Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)的详细内容，更多请关注0133技术站其它相关文章！
