vue 点击弹出下拉菜单 点击其他页面收回菜单

摘要:
由于elementUI的下拉菜单在项目中表现不佳(出于定位原因),我决定对以下情况进行小而漂亮的安排。单击选项(单击空白页)后,可以直接向您显示代码,然后将事件绑定到文档以使选项框消失。呈现页面后,添加单击事件。Vue实例已销毁。删除单击事件页面。其他点击事件

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

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

vue 点击弹出下拉菜单 点击其他页面收回菜单第1张

理清下面几种情况就妥了

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

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

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

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

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

vue 点击弹出下拉菜单 点击其他页面收回菜单第2张

vue 点击弹出下拉菜单 点击其他页面收回菜单第3张

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

vue 点击弹出下拉菜单 点击其他页面收回菜单第4张

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

vue 点击弹出下拉菜单 点击其他页面收回菜单第5张

刚进来时

vue 点击弹出下拉菜单 点击其他页面收回菜单第6张

点击一下“点击”

vue 点击弹出下拉菜单 点击其他页面收回菜单第7张

再次点击“点击”

vue 点击弹出下拉菜单 点击其他页面收回菜单第8张

点击页面外

 vue 点击弹出下拉菜单 点击其他页面收回菜单第9张

 内容显示时 点击页面外

点击页内显示

vue 点击弹出下拉菜单 点击其他页面收回菜单第10张vue 点击弹出下拉菜单 点击其他页面收回菜单第11张

点击页外消失

vue 点击弹出下拉菜单 点击其他页面收回菜单第12张

 o了~~~

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

vue 点击弹出下拉菜单 点击其他页面收回菜单第13张

 vue 点击弹出下拉菜单 点击其他页面收回菜单第14张

忘了个事情

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

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

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

如下 

 vue 点击弹出下拉菜单 点击其他页面收回菜单第15张

vue 点击弹出下拉菜单 点击其他页面收回菜单第16张

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

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

 【优化】

页面中有多个弹出组件时 只需要单个的弹出 点击其他组件 当前同样消失

结合以上

vue 点击弹出下拉菜单 点击其他页面收回菜单第17张

只要点击的不是当前这个特定的按钮,即消失 同样通过e.target判断

vue 点击弹出下拉菜单 点击其他页面收回菜单第18张

免责声明:文章转载自《vue 点击弹出下拉菜单 点击其他页面收回菜单》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇在eclipse中添加和删除项目Ant Design Pro入门教程,安装,运行(V5 Typescript版)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Vue2 使用Typescript 使用vue-property-decorator的简单介绍

参考:https://github.com/kaorun343/vue-property-decorator 怎么使vue支持ts写法呢,我们需要用到vue-property-decorator,这个组件完全依赖于vue-class-component. 首先安装:  npm i -D vue-property-decorator 我们来看下页面上代码展示...

Vue中Class与Style几种绑定用法

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute,所以我们可以用 v-bind 处理它们; Tab 页的切换就是我们最常见的一个效果之一,如何让选中的标题高亮,常用的方式就是动态切换 class 。 <button v-for="(tab, index) in tabs" v-bind:key="i...

记一次真实的webpack优化经历

前言 公司目前现有的一款产品是使用vue v2.0框架实现的,配套的打包工具为webpack v3.0。整个项目大概有80多个vue文件,也算不上什么大型项目。 只不过每次头疼的就是打包所耗费的时间平均在一分钟左右,而且打包后有几个文件显示为【big】,也就是文件体积过大。 最近就想着捣鼓一下,看能不能在此前的基础上做一些优化,顺带记录下来分享给大家。...

vue项目中引入 html2canvas ,控制台报错 Cannot assign to read only property 'className' of object '#&amp;lt; SVGSVGElement &amp;gt;'

 本人遇到该错误,找了好久原因,终于找到了原因, 一开始以为是后台管理系统的模板问题有冲突导致的,于是寻找最初模板使用同样方法引入,竟然没有报错,啊!这个时候就很神伤了。 仔细研究报错内容<SVGSVGElement>,难道和我使用的SVG矢量图有关系?于是尝试把有svg标签的地方全都注释掉了,结果,好了!!!! 原因大致可以归结为,html...

Vue上传文件:ElementUI中的upload实现

一、上传文件实现   两种实现方式: 1、直接action <el-upload class="upload-file" drag :action="doUpload" :data="pppss"> <i class="el-icon-upload"></i> <div clas...

解决JS(Vue)input[type='file'] change事件无法上传相同文件的问题

一般的解决方法:Html <input id="file" type="file" onchange="upload()" /> JS 事件逻辑执行完之后执行: document.getElementById('file').value = null; Vue中 <input ref="referenceUpload" @change=...