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> <!--浏览器方式下有些事件无法响应，需要引入vue-dash-event插件--> <script src="//www.itxst.com/package/ant-design-vue/vue-dash-event.js"></script> <link href="//www.itxst.com/package/ant-design-vue/antd.min.css" rel="stylesheet" /> <style> body { padding: 10px; } </style> </head> <body> <div id="app"> <a-menu v-on:open-change="openChange" :open-keys="openKeys" mode="inline" 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-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-sub-menu key="sub2"> <span slot="title" class="submenu-title-wrapper"><a-icon type="windows"></a-icon>订单列表</span> <a-menu-item-group title="水果商品"> <a-menu-item key="order:1"> <a-icon type="windows"></a-icon>苹果</a-menu-item> <a-menu-item key="order:2"> <a-icon type="apple"></a-icon>香蕉</a-menu-item> </a-menu-item-group> <a-menu-item-group title="蔬菜商品"> <a-menu-item key="order:3">胡萝卜</a-menu-item> <a-menu-item key="order:4">西红柿</a-menu-item> </a-menu-item-group> </a-sub-menu> <a-menu-item key="itxst"> <a-icon type="apple"></a-icon> 友情链接 </a-menu-item> </a-menu> </div> <script> Vue.use(window['vue-dash-event']); var app = new Vue({ el: '#app', data: { msg: "Welcome to Your Vue.js App", rootSubmenuKeys: ['sub1', 'sub2'], openKeys: ['sub1'], }, methods: { openChange(openKeys) { const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1); if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) { this.openKeys = openKeys; } else { this.openKeys = latestOpenKey ? [latestOpenKey] : []; } } } }); </script> </body> </html>
