怎么在js中通过代码手动隐藏element-ui中的dropdown-menu？

Question

怎么在js中通过代码手动隐藏element-ui中的下拉弹窗（dropdown-menu）？官方只提供了通过死板的事件来实现这个功能，当然通过模拟事件是可以解决的但是不太友好。而且当我通过css来使其display：none时，按钮需要两次才能触发dropdown的下拉弹窗。代码如下：

Answer 1

我看它源码，发现了这个东西：

import Clickoutside from 'element-ui/src/utils/clickoutside';

这个东西的作用就是当你点击元素外面的时候会触发的事件。

---

在组件当中使用，是这样的：

<template>
    <div v-clickoutside="handleClose">点我</div>
</template>

<script>
import Clickoutside from 'element-ui/src/utils/clickoutside'

export default {
    directives: { Clickoutside },
    methods: {
        handleClose () {
            console.log(12312312)
        },
    }
}

</script>

这样的话，就能手动触发你想要做的事件了，当然这个方法因为管理不了dropdown的状态，所以，你可以把dropdown的样式拿过来，做一个简单的封装，就可以了。

Answer 2

var evmousedown = document.createEvent('HTMLEvents');
evmousedown.initEvent('mousedown', false, true);
var evmouseup = document.createEvent('HTMLEvents');
evmouseup.initEvent('mouseup', false, true);
document.dispatchEvent(evmousedown)
document.dispatchEvent(evmouseup)

Answer 3

请问最后是怎么实现的,,,我也遇到同样的问题. 代码测试了 我怎么实现不了.能具体解答下吗 感谢

Answer 4

<el-dropdown ref="dropdown">
    ......    
</el-dropdown>

this.$refs.dropdown.visible = false;

亲测有效

Answer 5

源码中有答案https://github.com/ElemeFE/el...

// 组件
<el-dropdown ref="dropdown" ...>...</el-dropdown>

// js
this.$refs.dropdown.hide(); // 隐藏
this.$refs.dropdown.show(); // 显示

Answer 6

什么怎么隐藏，图片看一下！直接在浏览器调试工具找到他那个类，在style标签里边书写就行！