element-ui的dropdown组件使用

业务背景

开发一个类似下拉框的弹出菜单，内容需要可编辑，可输入 （就是可以自定义了）；

Dropdown

整个项目是基于Vue开发的，引用了element-ui 库，所以直接使用了el-dropdown 组件来实现该功能
弹出的下拉菜单大概就长下面这样，上面是一个模拟的select，点击select弹出。

问题

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

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

解决方案

看了好久的 element dropdown api，提供的参数都没有控制el-dropdown显隐的。
然后看 element dropdown github源代码发现这个变量就是控制当前el-dropdown显隐

然后解决方案就有了

<el-dropdown :hide-on-click="false" ref="dropdown">
    ......    
</el-dropdown>
复制代码

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

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

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

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