问题描述:
一个icon点击出现菜单,点击菜单区域外任何区域菜单收起。
何为优雅的去解决上述问题?
问题解决思路:
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 实现显示/隐藏层的思路(加全局点击事件),希望对大家有所帮助!
如对本文有疑问, 点击进行留言回复!!
同事牛逼啊,写了个隐藏 bug,我排查了 3 天才解决问题!
【JavaScript笔记(一)】万丈高楼平地起 - 基本概念篇
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
网友评论