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 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
javascript appendChild,innerHTML,join性能比较代码
Aug 29 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
Mar 01 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
JS实现的Unicode编码转换操作示例
Apr 28 Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 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
PHP5 安装方法
2006/10/09 PHP
PHP游戏编程25个脚本代码
2011/02/08 PHP
Win下如何安装PHP的APC拓展
2013/08/07 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
Open and Print a Word Document
2007/06/15 Javascript
JavaScript 序列化对象实现代码
2009/12/18 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
在nodejs中创建child process的方法
2021/01/26 NodeJs
Python实现的二维码生成小软件
2014/07/11 Python
python采用getopt解析命令行输入参数实例
2014/09/30 Python
Python模块包中__init__.py文件功能分析
2016/06/14 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
transform python环境快速配置方法
2018/09/27 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
会计专业推荐信
2013/10/29 职场文书
售后服务科岗位职责范文
2013/11/13 职场文书
文史专业毕业生自荐信
2013/11/17 职场文书
高中学生干部学习的自我评价
2014/02/21 职场文书
企业负责人任命书
2014/06/05 职场文书
开会通知
2015/04/20 职场文书
浅谈Python数学建模之整数规划
2021/06/23 Python
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL