Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
前端  /  管理员 发布于 3年前   899
平时项目中,经常会做一些下拉菜单等效果,这种效果可能会需要通过一个按钮来控制显示隐藏,并且当点击页面其他空白区域时,也要将其隐藏。 简单写个Demo 内容{{index}} @click.stop="" 为组织冒泡 data中定义ShowHidden mounted中写上下方代码,点击页面事件 methods中写入下方代码 这样,一个简单的效果就实现了,如果页面中需要使用多,那么方法一样,只需在要点击显示事件中,执行一次让其他下拉隐藏即可 总结 以上所述是小编给大家介绍的Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对站的支持!
data () { return { ShowHidden: false } },
mounted () { document.addEventListener('click', this.HiddenClick) },
methods: { // 点击页面事件 隐藏需要隐藏的区域 HiddenClick () { this.ShowHidden = false }, // 点击列表内,选中内容,并隐藏 ConBtn (val) { alert('内容' + val) this.ShowHidden = false } }
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!您可能感兴趣的文章:
博主 在
2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..xiaoB 在
2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..BUG4 在
你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..博主 在
go语言+beego框架中获取get,post请求的所有参数中评论 @ t1 直接在router.go文件中配就ok..Jade 在
如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号