Ant Design Vue教程
ant design vue dropdown 下拉菜单
本文将演示ant design vue dropdown 下拉菜单如何使用及其方法和事件，下拉菜单通常用在空间不够需要放多个命令达到收纳操作元素的效果。
基本用法
移入自动触发、右键触发菜单、点击触发菜单例子
完整代码
<!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
}
</style>
</head>
<body>
<div id="app">
<a-dropdown>
<a class="ant-dropdown-link" href="#"> Hover me <a-icon type="down" /> </a>
<a-menu slot="overlay">
<a-menu-item>
<a href="javascript:;">1st menu item</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">2nd menu item</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">3rd menu item</a>
</a-menu-item>
</a-menu>
</a-dropdown>
<span>移入自动触发</span>
<a-dropdown :trigger="['click']">
<a class="ant-dropdown-link" href="#"> Click me <a-icon type="down" /> </a>
<a-menu slot="overlay">
<a-menu-item key="0">
<a href="https://www.itxst.com/">1st menu item</a>
</a-menu-item>
<a-menu-item key="1">
<a href="http://www.taobao.com/">2nd menu item</a>
</a-menu-item>
<a-menu-divider></a-menu-divider>
<a-menu-item key="3">3rd menu item</a-menu-item>
</a-menu>
</a-dropdown>
<span>点击触发菜单</span>
<a-dropdown :trigger="['contextmenu']">
<span style="user-select: none;color:#1890ff">Right Click on Me</span>
<a-menu slot="overlay">
<a-menu-item key="1">1st menu item</a-menu-item>
<a-menu-item key="2">2nd menu item</a-menu-item>
<a-menu-item key="3">3rd menu item</a-menu-item>
</a-menu>
</a-dropdown>
<span>右键触发菜单</span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
bottom: 200
}
});
</script>
</body>
</html>带下拉框的按钮
例子
<!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
}
</style>
</head>
<body>
<div id="app">
<a-dropdown-button @click="handleButtonClick">
Dropdown
<a-menu slot="overlay" @click="handleMenuClick">
<a-menu-item key="1"><a-icon type="user"></a-icon>1st menu item</a-menu-item>
<a-menu-item key="2"><a-icon type="user"></a-icon>2nd menu item</a-menu-item>
<a-menu-item key="3"><a-icon type="user"></a-icon>3rd item</a-menu-item>
</a-menu>
</a-dropdown-button>
<a-dropdown-button @click="handleButtonClick" disabled style="margin-left: 8px">
Dropdown
<a-menu slot="overlay" @click="handleMenuClick">
<a-menu-item key="1"><a-icon type="user"></a-icon>1st menu item</a-menu-item>
<a-menu-item key="2"><a-icon type="user"></a-icon>2nd menu item</a-menu-item>
<a-menu-item key="3"><a-icon type="user"></a-icon>3rd item</a-menu-item>
</a-menu>
</a-dropdown-button>
<a-dropdown>
<a-menu slot="overlay" @click="handleMenuClick">
<a-menu-item key="1"><a-icon type="user"></a-icon>1st menu item</a-menu-item>
<a-menu-item key="2"><a-icon type="user"></a-icon>2nd menu item</a-menu-item>
<a-menu-item key="3"><a-icon type="user"></a-icon>3rd item</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px"> Button <a-icon type="down"></a-icon> </a-button>
</a-dropdown>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
bottom: 200
},
methods: {
handleButtonClick(e) {
console.log('click left button', e);
},
handleMenuClick(e) {
console.log('click', e);
},
}
});
</script>
</body>
</html>弹出位置
支持 bottomLeft、bottomCenter、bottomRight、topLeft、topCenter、topRight 6个弹出位置。属性placement设置前面六个价值
<a-dropdown placement="bottomRight">
<a-button>bottomRight</a-button>
<a-menu slot="overlay">
<a-menu-item>
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">1st menu item</a>
</a-menu-item>
<a-menu-item>
<a target="_blank" rel="noopener noreferrer" href="https://www.itxst.com/">2nd menu item</a>
</a-menu-item>
<a-menu-item>
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">3rd menu item</a>
</a-menu-item>
</a-menu>
</a-dropdown>多级菜单
多级菜单例子
<a-dropdown>
<a class="ant-dropdown-link" href="javascript:void(0)"> 多级菜单 <a-icon type="down" /> </a>
<a-menu slot="overlay">
<a-menu-item>1st menu item</a-menu-item>
<a-menu-item>2nd menu item</a-menu-item>
<a-sub-menu title="二级子菜单" key="key1">
<a-menu-item>3rd menu item</a-menu-item>
<a-menu-item>4th menu item</a-menu-item>
<a-sub-menu title="三级子菜单" key="key2">
<a-menu-item>33rd menu item</a-menu-item>
<a-menu-item>itxst.com</a-menu-item>
</a-sub-menu>
</a-sub-menu>
<a-sub-menu title="禁用的菜单" disabled>
<a-menu-item>5d menu item</a-menu-item>
<a-menu-item>6th menu item</a-menu-item>
</a-sub-menu>
</a-menu>
</a-dropdown>自动展开下拉菜单
例子
<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>