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 相关文章推荐
JavaScript 给汉字排序实例代码
Jun 28 Javascript
select组合框option的捕捉实例代码
Sep 30 Javascript
javascript操作cookie_获取与修改代码
May 21 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
May 15 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
js点击选择文本的方法
Feb 09 Javascript
理解JavaScript中worker事件api
Dec 25 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
微信小程序拼接图片链接无底洞深入探究
Sep 03 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
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
php cookie 登录验证示例代码
2009/03/16 PHP
php通过数组实现多条件查询实现方法(字符串分割)
2014/05/06 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
浅析Yii2缓存的使用
2016/05/10 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
seajs1.3.0源码解析之module依赖有序加载
2012/11/07 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
python 算法 排序实现快速排序
2012/06/05 Python
python实现一组典型数据格式转换
2018/12/15 Python
python实现最大优先队列
2019/08/29 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
英国景点门票网站:attractiontix
2019/08/27 全球购物
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
计算机应用与科学个人的自我评价
2013/11/15 职场文书
服务员岗位职责
2014/01/29 职场文书
清正廉洁演讲稿
2014/05/22 职场文书
质量管理标语
2014/06/12 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
图文详解Nginx版本平滑升级方案
2021/09/15 Servers