iview多个Dropdown右键菜单怎么收起已展开的菜单？

Question

问题描述

设置了多个Dropdown右键弹出菜单，但已经有菜单展开的情况下，右键其他菜单没效果，非得在空白地方点一下左键，把原菜单收起才能再展开新菜单，请问怎么解决这种问题？

截图

相关代码

<div id="app">
    <Dropdown ref="menu" trigger="contextMenu">
        <dropdown-menu slot="list">
            <dropdown-item>驴打滚</dropdown-item>
            <dropdown-item>炸酱面</dropdown-item>
        </dropdown-menu>
    </Dropdown>
    <a href="javascript:void(0)" @click.right.prevent="rightClick">菜单一</a>
    <a href="javascript:void(0)" @click.right.prevent="rightClick">菜单二</a>
    <a href="javascript:void(0)" @click.right.prevent="rightClick">菜单三</a>
</div>
<script>

    new Vue({
        el: '#app',
        methods: {
            rightClick: function (event) {
                let _this = this;
                //每次展开前重置visible状态测试无效，但控制台直接调用却有效
                //_this.$refs.menu.currentVisible = false;
                _this.$refs.menu.$refs.reference = event.target;
                _this.$refs.menu.currentVisible =true;
            }
        }
    })

Answer 1

试试这个
const menu = this.$refs.menu;
menu.style.top = e.clientY + 125 > window.innerHeight ? ${window.innerHeight - 127}px : ${e.clientY}px;
menu.style.left = ${e.clientX}px;