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


Posted in Javascript onJanuary 16, 2020

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

Javascript 相关文章推荐
重定向实现代码
Nov 20 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
js 创建对象 经典模式全面了解
Aug 16 Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
May 14 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 #Javascript
使用Karma做vue组件单元测试的实现
Jan 16 #Javascript
js实现div色块拖动录制
Jan 16 #Javascript
微信小程序实现二维码签到考勤系统
Jan 16 #Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 #Javascript
JavaScript实现简单的计算器
Jan 16 #Javascript
js面向对象之实现淘宝放大镜
Jan 15 #Javascript
You might like
PHP 中执行系统外部命令
2006/10/09 PHP
在PHP中执行系统外部命令
2006/10/09 PHP
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
在Windows8上的搭建Python和Django环境
2014/07/03 Python
python3编码问题汇总
2016/09/06 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
Python如何实现邮件功能
2020/05/27 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
出纳的岗位职责
2013/11/09 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python
python munch库的使用解析
2021/05/25 Python
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python
python_tkinter弹出对话框创建
2022/03/20 Python