vue点击按钮打开下拉菜单_vue 点击弹出下拉菜单点击其他页面收回菜单

由于elementUI的下拉菜单在项目中表现得不尽人意 (定位的原因)

于是决定自己整一个小而美

理清下面几种情况就妥了

出现前出现后点击后出现后未点击选项(点击空白页)

还是直接放码过来 show you my code吧~~~

直接上点击空白(其他)页面选项框收回代码吧

思路：直接阻止按钮和选项框的事件冒泡，然后给document绑定事件让选项框消失

页面渲染完即添加点击事件 vue实例销毁移除点击事件

页面其他点击事件一定要记得加上.stop 阻止冒泡亲测不加点击不会生效没有反应

方法二：通过target事件判定只要点击的不是包裹住按钮和内容区域的Div就让v-show为false

刚进来时

点击一下“点击”

再次点击“点击”

点击页面外

内容显示时点击页面外

点击页内显示

点击页外消失

o了~~~

vue中可设定元素ref 然后this.$refs访问该元素得信息

忘了个事情

这个弹出层整体的场景是这样的

点击某个按钮一片内容出现弹出是一个动画效果可自定义

再次点击这个按钮内容又消失这是天才纸尿裤的第一步

如下

点击span时会切换初始值false 在true false 之间切换

用此来控制内容区域的显示

原文：https://www.cnblogs.com/522040-m/p/10021559.html

vue点击按钮打开下拉菜单_vue 点击弹出下拉菜单点击其他页面收回菜单相关推荐

access窗体转换html,access点击按钮打开窗体
如何在 Access 2007 的窗体中实现点击按钮打开另一首先有4个名称分别为A.B.C.D的窗体,已经建立好了. 我新建了一个空打开一个Access数据库软件,可以打开已创建好的数据库,在[数据库 ...
通过点击按钮打开新的窗口
通过点击按钮打开新的窗口通过点击某个按键打开新的窗口,原来的窗口关闭或者不关闭: 主要语句 //创建新的界面 A a=new A(); //将新的界面展示出来,此参数设置为true A.setVis ...
js 点击按钮打开浏览器新页签，兼容版
话不多说直接上代码,这是千辛万苦寻来的,帮助需要帮助的人. <html><head>点击按钮打开浏览器新页签</head><body><div o ...
点击按钮打开新页面（携带参数）
点击按钮打开新页面(携带参数) <el-button size="small" class="button-right" @click="cre ...
微信公众号，点击按钮打开pdf文件流，安卓跳转到浏览器里下载，ios可预览但默认不能下载
微信公众号,点击按钮打开pdf文件流,安卓跳转到浏览器里下载,ios可预览但默认不能下载注:在pc上开始时采用这两种方式是没有效果的,或者打开的是空页面,但上线到公众号是没有问题的!!!!!!!!! ...
jq点击按钮打开和关闭弹出层，点击除了当前按钮以外的地方关闭弹出层
1.html <a id="more" οnclick="moreFun()">更多</a> <ul id="moreL ...
VB.net MessageBox弹出的确认对话框点击确定按钮
VB.net MessageBox弹出的确认对话框点击vb.net教程确定按钮 Dim dr As DialogResult = MessageBox.Show("XX", &qu ...
点击按钮之后右侧弹出导航，再点击右侧导航隐藏回去的实现
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/53408091 本文出自[我是干勾鱼的博客] 实现了一个点击按钮之后右侧弹出导航, ...
html点击按钮弹出悬浮窗_点击文字或按钮弹出一个DIV窗口（DIV悬浮窗口）
以下是弹出窗口代码: 点击文字弹出一个DIV层窗口代码 .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; wi ...
[Android] 底部菜单布局+PopupWindows实现弹出菜单功能(初级篇)
这篇文章主要是自己研究如何对底部菜单进行布局,并简单的实现点击不同"按钮"实现图片切换和背景切换的功能,最后通过PopupWindows实现弹出菜单,点击不同按钮能实现不同 ...

vue点击按钮打开下拉菜单_vue 点击弹出下拉菜单点击其他页面收回菜单

vue点击按钮打开下拉菜单_vue 点击弹出下拉菜单点击其他页面收回菜单相关推荐

最新文章

热门文章

vue点击按钮打开下拉菜单_vue 点击弹出下拉菜单 点击其他页面收回菜单

vue点击按钮打开下拉菜单_vue 点击弹出下拉菜单 点击其他页面收回菜单相关推荐

最新文章

热门文章

vue点击按钮打开下拉菜单_vue 点击弹出下拉菜单点击其他页面收回菜单

vue点击按钮打开下拉菜单_vue 点击弹出下拉菜单点击其他页面收回菜单相关推荐