ant design vue dropdown 通过方法展开隐藏下拉菜单

有时我们需要通过js方法来展开和隐藏ant design vue dropdown 通过方法展开隐藏下拉菜单,实现原理比较简单就是模拟用户点击菜单元素即可。当然官方提供了visible属性来控制菜单的隐藏和显示。

官方方法

例子

<div id="app">
    <a-button type="primary" @click="show">显示菜单</a-button>
    <a-button @click="hide">隐藏菜单</a-button>
    <a-dropdown :visible="isVisible">
        <a class="ant-dropdown-link" href="javascript:void(0)"> Hover me <a-icon type="down" /> </a>
        <a-menu slot="overlay">
            <a-menu-item>
                <a href="javascript:;">www.baidu.com</a>
            </a-menu-item>
            <a-menu-item>
                <a href="javascript:;">www.itxst.com</a>
            </a-menu-item>
            <a-menu-item>
                <a href="javascript:;">www.taobao.com</a>
            </a-menu-item>
        </a-menu>
    </a-dropdown>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isVisible: false //隐藏显示
        },
        methods: {
            show: function () {
                this.isVisible = true;
            },
            hide: function () {
                this.isVisible = false;
            }
        }
    });
</script>

其他方法

例子

完整代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Ant Design Vue dropdown下拉菜单位置例子</title>
    <script src="https://www.itxst.com/package/vue/vue.min.js"></script>
    <script src="https://www.itxst.com/package/ant-design-vue/antd.min.js"></script>
    <link href="https://www.itxst.com/package/ant-design-vue/antd.min.css" rel="stylesheet" />
    <style>
        body {
            padding-top: 10px;
            padding-left: 30px
        }
        #app .ant-btn {
            margin-right: 8px;
            margin-bottom: 8px;
        }
    </style>
</head>
<body>
<div id="app">
    <a-dropdown id="itxst" placement="bottomLeft" trigger="click">
        <a-button>3秒后自动展开菜单</a-button>
        <a-menu slot="overlay">
            <a-menu-item>
                <a target="_blank" href="http://www.alipay.com/">1st menu item</a>
            </a-menu-item>
            <a-menu-item>
                <a target="_blank" href="https://www.itxst.com/">2nd menu item</a>
            </a-menu-item>
            <a-menu-item>
                <a target="_blank" href="http://www.tmall.com/">3rd menu item</a>
            </a-menu-item>
        </a-menu>
    </a-dropdown>
</div>
<script>
    var app = new Vue({
        el: '#app',
    });
    //展开id为itxst的下拉菜单
    setTimeout(function () {
        document.getElementById("itxst").click();
    }, 3000);
</script>
</body>
</html>