Ant Design Vue教程
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>