专注前端行业精选
Vue中如何实现 点击显示 再点击隐藏 点击页面空白区域也隐藏效果
作者:鹏仔先生日期:2020-06-03浏览:845分类:JavaScript
平时项目中,经常会做一些下拉菜单等效果,这种效果可能会需要通过一个按钮来控制显示隐藏,并且当点击页面其他空白区域时,也要将其隐藏。
简单写个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 } }
这样,一个简单的效果就实现了,如果页面中需要使用多,那么方法一样,只需在要点击显示事件中,执行一次让其他下拉隐藏即可
手机扫码访问
猜你还喜欢
- 03-05 js将数字金额用符号间隔 vue中使用逗号间隔数字金额
- 02-25 JS判断某个时间戳是否为当天时间
- 02-19 网页禁止返回 H5禁止物理返回 vue禁止返回
- 02-07 vue使用viewerjs实现图片点击放大
- 02-05 vue实现点击刷新页面 H5实现刷新页面
- 02-04 H5移动端项目实现手写签名功能 vue实现手写签名
- 02-04 vue移动端使用Vconsole Vconsole使用
- 02-04 vue中如何点击返回上一页,vue判断没有上页返回首页
- 01-13 苹果手机new Date()时候的坑 ios new Date时为NAN
- 12-31 base64转file文件格式 vue中将base64转file文件格式
- 12-31 原生js将数字金额转汉字金额 vue中数字金额转汉字金额
- 12-18 elementui日期选择器设置开始时间不能大于结束时间
暂无评论,来添加一个吧。