ant design vue menu 导航菜单

ant design vue menu 导航菜单是一个网站或者系统的重要功能，通过导航可以对网站或者系统的功能进行分门别类。

水平导航菜单

例子

<div id="app">
<a-menu v-model="current" mode="horizontal">
    <a-menu-item key="home" @click="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>
        <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-item key="itxst">
        <a href="http://www.itxst.com" target="_blank">友情链接 - Link</a>
    </a-menu-item>
</a-menu>
</div>
<script>
var app = new Vue({
    el: '#app',
    data: {
        current: ['home']
    },
    methods: {
        home: function () {
            alert('你点击了首页')
        }
    }
});
</script>

内嵌导航菜单

内嵌导航菜单只需要把mode设置为"inline"即可， <a-menu v-model="current" mode="inline" style="width: 256px">

例子

垂直导航菜单

内嵌导航菜单只需要把mode设置为"vertical"即可， <a-menu v-model="current" mode="vertical" style="width: 256px">

例子

缩起展开内嵌菜单

缩起展开内嵌菜单需要注意的就是标题文字需要用span标签

<a-menu-item key="home" @click="home">
 <a-icon type="home"></a-icon><span>首页</span>
</a-menu-item>

例子

只展开当前父级菜单

只展开当前父级菜单及只保留一个展开的子菜单，需要用到 openChange事件和openKeys属性,完整代码如下

//vue-dash-event 解决openChange事件无效的问题
Vue.use(window['vue-dash-event']);
var app = new Vue({
    el: '#app',
    data: {
        msg: "Welcome to www.itxst.com",
        rootSubmenuKeys: ['sub1', 'sub2'],//子菜单的key
        openKeys: ['sub1'],   //展示时默认展开的菜单key
    },
    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] : [];
            }
        }
    }
});

在线试一试

动态切换导航菜单的模式和主题

例子