好资源导航 » 文章资讯 » Vue实现点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)

Vue实现点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)

2023-08-03 00:24:03 62

平时项目中，经常会做一些下拉菜单等效果，这种效果可能会需要通过一个按钮来控制显示隐藏，并且当点击页面其他空白区域时，也要将其隐藏。

简单写个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实现点击显示再点击隐藏效果(点击页面空白区域也隐藏)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)

热门推荐

随机推荐

Vue实现点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)