Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
更新时间：2020年01月16日 10:34:00 作者：鹏仔先生
这篇文章主要介绍了Vue实现 点击显示 再点击隐藏 点击页面空白区域也隐藏效果,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
平时项目中，经常会做一些下拉菜单等效果，这种效果可能会需要通过一个按钮来控制显示隐藏，并且当点击页面其他空白区域时，也要将其隐藏。
简单写个Demo
<!-- 按钮 -->
<button @click.stop="ShowHidden = !ShowHidden">显示或隐藏</button>
<!-- 下拉列表 -->
<div v-if="ShowHidden" @click.stop="">
<!-- 列表内容 -->
<p v-for="(item,index) in 5" :key="index" @click="ConBtn(index)">内容{{index}}</p>
</div>
@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实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
在Vue开发中,父组件和子组件之间的数据传递是一项常见的任务,本文将介绍如何在Vue中实现父组件控制子组件的值,以便灵活地管理和更新子组件的数据,文中有详细的代码讲解,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vue下的elementui轮播图自适应高度问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
vue elementui table编辑表单时弹框增加编辑明细数据的实现
在Vue项目中,通过使用Element UI框架实现表单及其明细数据的新增和编辑操作,主要通过弹窗形式进行明细数据的增加和编辑,有效提升用户交互体验,本文详细介绍了相关实现方法和代码,适合需要在Vue项目中处理复杂表单交互的开发者参考2024-10-10
常见的打印有JavaScript打印、jQuery、vue打印,这里主要讲述vue使用vue-print-nb进行打印,废话不多说,直接手摸手上代码,感兴趣的朋友可以参考下2024-01-01
这篇文章主要为大家介绍了vue2从template到render模板编译入口详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了Element MessageBox弹框的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
下面小编就为大家分享一篇vue-cli创建的项目,配置多页面的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要给大家介绍了关于Vue项目中最新用到的一些实用小技巧，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
在微信小程序中，可以使用全局配置和使用开发、体验、生产环境的地址，这篇文章主要介绍了Vue微信和uniapp配置环境地址,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vue + element ui实现播放器功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
最新评论