Vue 实现显示/隐藏层的思路(加全局点击事件)


Posted in Javascript onDecember 31, 2019

问题描述:

一个Icon点击出现菜单,点击菜单区域外任何区域菜单收起。
何为优雅的去解决上述问题?

  • 尽可能的采用vue来解决问题
  • 尽可能少的与原生对象发生交互
  • 代码干净、易懂

问题解决思路:

  • 通过Vue的v-show指令决定菜单的显示、隐藏。
  • 通过Document的全局点击事件判断是否该收起
  • 需要优雅的解决几个问题:
  • 禁止点击事件冒泡。采用VUE的@click.stop来解决问题,请参考下方代码
  • 优雅且安全的移除全局事件监听(只有菜单弹出的时候才去监听)

document的事件添加

HTML

<template>
 <div class="dir">
  <!-- 按钮,特别注意@click.stop用于禁止消息冒泡 -->
  <span title="排序" id="sort_by" @click.stop="onSortClick()" class="icons">按钮</span><br/>
  <!-- 菜单 v-show设置变量 showSortmenu,style的内容要一开始就写上!
 此处不确定是否是个BUG,不初始style时显示不正确
 -->
  <ul class="menu" id="sort_by_menu" v-show="showSortmenu" style="display: block;">
   <li sort="title">
    <span>标题</span>
   </li>
   <li sort="lastModify">
    <span>最后修改时间</span>
   </li>
   <li sort="free">
    <span>自定义排序</span>
   </li>
  </ul>
 </div>
</template>

JavaScript

<script>
export default {
 name: "demo2",
 data() {
  return {
   showSortmenu: false
  };
 },
 props: {},
 methods: {
  //接收按钮点击事件@click.stop,禁止冒泡
  onSortClick: function() {
   //设置bool值, 
   this.showSortmenu = !this.showSortmenu;
   //要特别注意这里,只有菜单显示的时候才会监听全局点击事件
   //并且,要设置为:vue的方法,不能扔到export代码段外面去。
   //要切记`this`这个变量对应的实例是谁
   if (this.showSortmenu) {
    document.addEventListener("click", this.onGlobalClick);
   }
  },
  //全局监听点击事件
  onGlobalClick(e) {
   //判断全局被点中的控件的className,不同就是菜单外点击
   if (e.target.className != "sort_by_menu") {
    this.showSortmenu = false;
    //这里要注意啊!!!!一定要记得移除监听事件!!!!!
    document.removeEventListener("click", this.onGlobalClick);
   }
  }
 },
 mounted() {},
 
};
</script>

总结

以上所述是小编给大家介绍的Vue 实现显示/隐藏层的思路(加全局点击事件),希望对大家有所帮助!

Javascript 相关文章推荐
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
js URL参数的拼接方法比较
Feb 15 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
JS中substring与substr的用法
Nov 16 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
May 16 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
浅谈JavaScript面向对象--继承
Mar 20 Javascript
TypeScript之调用栈的实现
Dec 31 #Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 #Javascript
Vue实现剪贴板复制功能
Dec 31 #Javascript
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 #Javascript
小程序外卖订单界面的示例代码
Dec 30 #Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 #Javascript
JS三级联动代码格式实例详解
Dec 30 #Javascript
You might like
php面向对象全攻略 (二) 实例化对象 使用对象成员
2009/09/30 PHP
ThinkPHP表单自动验证实例
2014/10/13 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
js下用gb2312编码解码实现方法
2009/12/31 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
初步使用bootstrap快速创建页面
2016/03/03 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
vue v-for 使用问题整理小结
2019/08/04 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
python+opencv实现霍夫变换检测直线
2020/10/23 Python
python selenium 弹出框处理的实现
2019/02/26 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
执行Python程序时模块报错问题
2020/03/26 Python
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
美国电视购物:QVC
2017/02/06 全球购物
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
阳光体育活动实施方案
2014/05/25 职场文书
爱护花草树木的标语
2014/06/11 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
mysql联合索引的使用规则
2021/06/23 MySQL
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技