博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
element-ui的dropdown组件使用
阅读量:6347 次
发布时间:2019-06-22

本文共 598 字,大约阅读时间需要 1 分钟。

业务背景

开发一个类似下拉框的弹出菜单,内容需要可编辑,可输入 (就是可以自定义了);

Dropdown

整个项目是基于Vue开发的,引用了element-ui 库,所以直接使用了el-dropdown 组件来实现该功能

弹出的下拉菜单大概就长下面这样,上面是一个模拟的select,点击select弹出。

问题

因为菜单是多选的,肯定不能点击el-dropdown-item就去关闭el-dropdown,但页面上其他区域大多都给阻止元素冒泡了,所以插件本身的监听是否点击在el-dropdown上的事件就无效了

那怎么才能够使用代码关闭el-dropdown呢?

解决方案

看了好久的 ,提供的参数都没有控制el-dropdown显隐的。

然后看 源代码发现这个变量就是控制当前el-dropdown显隐

然后解决方案就有了

......
复制代码

在自己代码的事件控制中调用,就可以实现隐藏功能了

this.$refs.dropdown.visible = false;复制代码

想了解 可以点击这里,多多了解Vue各种特性和开源组件的源码会对我们日常开发有很大的帮助,之前还想要是el-dropdown实现不了就自己写一个这种组件呢 (┬_┬)

转载于:https://juejin.im/post/5b98b21ef265da0ae4726dfd

你可能感兴趣的文章
Java 基础 之 算数运算符
查看>>
Windows下配置安装Git(二)
查看>>
一个最简单的基于Android SearchView的搜索框
查看>>
铁路开通WiFi“钱景”不明
查看>>
Nutanix领衔的超融合能带来新存储黄金时代吗?
查看>>
Facebook申请专利 或让好友及陌生人相互拼车
查看>>
电力“十三五”规划:地面光伏与分布式的分水岭
查看>>
美联社再告FBI:要求公开请黑客解锁iPhone花费
查看>>
三星电子出售希捷和夏普等四家公司股份
查看>>
任志远:当云计算遇上混合云
查看>>
思科联手发那科 用物联网技术打造无人工厂
查看>>
智慧城市首要在政府利用大数据的智慧
查看>>
2015年物联网行业:巨头展开专利大战
查看>>
以自动化测试撬动遗留系统
查看>>
网络安全初创公司存活之道
查看>>
《图解CSS3:核心技术与案例实战》——1.2节浏览器对CSS3的支持状况
查看>>
《Android应用开发》——2.4节应用类
查看>>
继 One Step 后,锤子科技 Big Bang 正式开源
查看>>
《淘宝店铺经营管理一册通》一一1.4 商品发布
查看>>
《数据科学:R语言实现》——2.5 使用Excel文件
查看>>