Ant Design Vue Menu 导航菜单事件例子
查看教程
运行代码
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 Menu 导航菜单事件例子</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: 10px; } </style> </head> <body> <script src="//www.itxst.com/package/ant-design-vue/vue-dash-event.js"></script> <div id="app"> <a-menu multiple="true" v-on:open-change="openChange" @click="home" @deselect="deselect" @select="select" style="width: 256px"> <a-menu-item key="home"> <a-icon type="home"></a-icon>首页</a-menu-item> <a-menu-item key="product" disabled> <a-icon type="dropbox"></a-icon>禁用项</a-menu-item> <a-menu-item key="itxst"> <a-icon type="apple"></a-icon> <span>ITXST.COM</span> </a-menu-item> <a-sub-menu key="sub1"> <span slot="title" class="submenu-title-wrapper"><a-icon type="share-alt"></a-icon>产品列表</span> <a-menu-item-group title="水果商品"> <a-menu-item key="setting:1"> <a-icon type="windows"></a-icon>苹果</a-menu-item> <a-menu-item key="setting:2"> <a-icon type="apple"></a-icon>香蕉</a-menu-item> </a-menu-item-group> <a-menu-item-group title="蔬菜商品"> <a-menu-item key="setting:3">胡萝卜</a-menu-item> <a-menu-item key="setting:4">西红柿</a-menu-item> </a-menu-item-group> </a-sub-menu> </a-menu> </div> <script> Vue.use(window['vue-dash-event']); var app = new Vue({ el: '#app', data: { current: ['home'] }, methods: { home: function (obj) { alert("点击了：" + obj.key) }, deselect: function (obj) { alert("取消了：" + obj.key) }, select: function (obj) { alert("选择了：" + obj.key) }, openChange(openKeys) { alert("展开了：" + openKeys) } } }); </script> </body> </html>
