Ant Design Vue dropdown下拉菜单位置例子
查看教程
运行代码
PC模式
平板模式
手机模式
<!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="//www.itxst.com/package/vue/vue.min.js"></script> <script src="//www.itxst.com/package/ant-design-vue/antd.min.js"></script> <link href="//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"> <template v-for="(placement, index) in placements"> <a-dropdown :placement="placement"> <a-button>{{placement}}</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> <br v-if="index === 2" /> </template> </div> <script> var app = new Vue({ el: '#app', data() { return { placements: [ 'bottomLeft', 'bottomCenter', 'bottomRight', 'topLeft', 'topCenter', 'topRight', ], }; }, }); </script> </body> </html>
