Ant Design Vue教程

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] : [];
            }
        }
    }
});

在线试一试

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

例子

Catalog
快速入门 Dropdown 下拉菜单 Menu 导航菜单 Menu 导航菜单 Menu 导航菜单属性及事件 Pagination 分页 Steps 步骤条 AutoComplete 自动填充 Cascader 级联选择 Checkbox 多选框 DatePicker 日期选择框 Input 输入框 InputNumber 数字输入框 Mentions 提及 Radio 单选框 Rate 评分组件 Select 下拉框 Slider 滑动输入条 Switch 开关