Let you briefly understand the usage of the Menu menu in AntDesign Vue

This article will introduce you to how to use the Menu menu in Ant Design Vue, introduce its common properties, common events, and how to recursively nest multi-level menus. I hope it will be helpful to everyone!

Versionant-design-vue: "^1.7.4",

Common attributes

##selectedKeys(v-model)Currently selected menu item##defaultSelectedKeyskey##Description

Attributes	Description	Default value
mode	Menu type, now supports vertical, horizontal, and inline modes	vertical
inlineCollapsed	inline Whether the menu is in the collapsed state
theme	theme Color(light/dark)	light
openKeys(.sync)	Currently expanded SubMenu menu itemkey array
defaultOpenKeys	Initially expandedSubMenu Menu itemkey Array
	key Array
Initially selected menu Item	Array

defaultSelectedKeys It is the
key that is selected by default (key bound to a-menu-item), and will be highlighted when selected; selectedKeys also has the same effect, do not use them at the same time. The difference is that if you only want to specify an initialized menu option, use defaultSelectedKeys. If you need to modify the data yourself to select the selected item of the menu, use selectedKeys. (The same applies to openKeys

and

defaultOpenKeys) Common events

openChange

is

Menu event, SubMenu Expand/close callbackRecursively nested multi-level menu

If there is only a two-level menu, use it directly

v -for

and

v-if instructions can be completed; if the menu level ≥ 3, you need to use functional component . The specific reason has been explained on the official website: Before v2.0, because the properties of

a-sub-menu

will be dynamically changed inside the component, if it is split into a single file, it cannot To mount attributes to

a-sub-menu, you need to declare the attributes yourself and mount them. For convenience and to avoid property declarations, we recommend using functional components.

Code

App.vue (The test is just written in
App.vue)

<template>
    <div id="app">
        <div style="width: 256px">
            <a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
            <a-icon :type="collapsed ? &#39;menu-unfold&#39; : &#39;menu-fold&#39;" />
            </a-button>
            <a-menu
                :defaultSelectedKeys="[$route.path]"
                :openKeys="openKeys"
                mode="inline"
                theme="dark"
                :inline-collapsed="collapsed"
                @openChange="onOpenChange"
                @click="menuClick"
            >
                <template v-for="item in list">
                    <a-menu-item v-if="!item.children" :key="item.path">
                        <a-icon type="pie-chart" />
                        <span>{{ item.title }}</span>
                    </a-menu-item>
                    <sub-menu v-else :key="item.path" :menu-info="item" />
                </template>
            </a-menu>
        </div>
        <router-view/>
    </div>
</template>

<script>
import { Menu } from &#39;ant-design-vue&#39;;
const SubMenu = {
  template: `
      <a-sub-menu :key="menuInfo.key" v-bind="$props" v-on="$listeners">
        <span slot="title">
          <a-icon type="mail" /><span>{{ menuInfo.title }}</span>
        </span>
        <template v-for="item in menuInfo.children">
          <a-menu-item v-if="!item.children" :key="item.path">
            <a-icon type="pie-chart" />
            <span>{{ item.title }}</span>
          </a-menu-item>
          <sub-menu v-else :key="item.path" :menu-info="item" />
        </template>
      </a-sub-menu>
    `,
  name: &#39;SubMenu&#39;,
  // must add isSubMenu: true 此项必须被定义
  isSubMenu: true,
  props: {
    // 解构a-sub-menu的属性，也就是文章开头提到的为什么使用函数式组件
    ...Menu.SubMenu.props,
    // Cannot overlap with properties within Menu.SubMenu.props
    menuInfo: {
      type: Object,
      default: () => ({}),
    },
  },
};

export default {
    name: "App",
    components: {
        &#39;sub-menu&#39;: SubMenu,
    },
    data() {
        return {
            collapsed: false,
            openKeys: [],
            rootSubmenuKeys: [&#39;/user&#39;],
            list: [
                {
                    key: &#39;1&#39;,
                    title: &#39;信息管理&#39;,
                    path: &#39;/info&#39;,
                },
                {
                    key: &#39;2&#39;,
                    title: &#39;用户管理&#39;,
                    path: &#39;/user&#39;,
                    children: [
                        { 
                            key: &#39;2.1&#39;,
                            title: &#39;后台用户&#39;,
                            path: &#39;/adminUser&#39;,
                            children: [
                                { 
                                    key: &#39;2.1.1&#39;,
                                    title: &#39;新增用户&#39;,
                                    path: &#39;/addAdminUser&#39;,
                                    children: [
                                        {
                                            key: &#39;2.1.1。1&#39;,
                                            title: &#39;用户xx&#39;,
                                            path: &#39;/addAdminUserXX&#39;,
                                        }
                                    ]
                                }
                            ]
                        },
                        { 
                            key: &#39;2.2&#39;,
                            title: &#39;前台用户&#39;,
                            path: &#39;/frontUser&#39;,
                        }
                    ]
                }
            ],
        };
    },
    created(){
        const openKeys = window.sessionStorage.getItem(&#39;openKeys&#39;)
        if(openKeys){
            this.openKeys = JSON.parse(openKeys)
        }
    },
    methods: {
        toggleCollapsed() {
            this.collapsed = !this.collapsed;
        },
        onOpenChange(openKeys) {
            // 将当前打开的父级菜单存入缓存中
            window.sessionStorage.setItem(&#39;openKeys&#39;, JSON.stringify(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] : [];
            }
        },
        menuClick({key}) {
            // 获取到当前的key,并且跳转
            this.$router.push({
                path: key
            })
        },
    }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 50px;
}
</style>

The router

configuration is omitted here, I believe everyone here will do the same! (If you don’t know, please leave a message below, I hope you can teach me!)

If

vue

reports a compilation error

You are using the runtime-only build of Vue, You can add a line runtimeCompiler: true to the vue configuration file and run it again. If you click the same menu and an error is reported

NavigationDuplicated: Avoided redundant navigation to current location

, you need to modify the

Router settings (router/index. js):

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}

Effect

Automatically renders multi-level nested menus; refreshing will save the selected menu; click the menu to close other All menus expanded.

[Related recommendations: "

vue.js Tutorial

"]

The above is the detailed content of Let you briefly understand the usage of the Menu menu in AntDesign Vue. For more information, please follow other related articles on the PHP Chinese website!