Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to use the Menu menu in AntDesign Vue. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Common attributes describe whether the menu is closed when the default value is mode menu type, which now supports vertical, horizontal, and embedded verticalinlineCollapsedinline.

Theme theme Color (light/dark) lightopenKeys (.sync) the currently expanded key array of SubMenu menu items

Key array of SubMenu menu items initially expanded by defaultOpenKeys

SelectedKeys (v-model) the currently selected key array of menu items

Key array of menu items initially selected by defaultSelectedKeys

Description

DefaultSelectedKeys is selected by default key (key bound on a-menu-item), is selected will have a highlighted effect; selectedKeys is the same function, do not use at the same time, the difference is that if you only want to specify an initialization of the menu option to use defaultSelectedKeys, if you need to modify the data to select the menu selected on the use of selectedKeys.

(the same goes for openKeys and defaultOpenKeys.)

Common events

OpenChange is an event for Menu, callback for SubMenu to expand / close

Recursively nest multi-level menus

If there are only two-level menus, you can directly use v-for and v-if instructions; if the menu level ≥ 3, you need to use functional components. The specific reasons have been explained on the official website:

Before v2.0, because the properties of the a-sub-menu will be dynamically changed within the component, if it is split into a single file, the properties cannot be mounted to the a-sub-menu, you need to declare the properties and mount them. For convenience and avoid property declaration, we recommend using functional components.

Code

App.vue (the test is written casually in App.vue)

{{item.title}} import {Menu} from 'ant-design-vue' Const SubMenu = {template: `{menuInfo.title}} {{item.title}}`, name: 'SubMenu', / / must add isSubMenu: true must be defined as isSubMenu: true, props: {/ / deconstruct the attributes of a-sub-menu That's why functional components are used at the beginning of the article. Menu.SubMenu.props, / / Cannot overlap with properties within Menu.SubMenu.props menuInfo: {type: Object, default: () = > ({}),} Export default {name: "App", components: {'sub-menu': SubMenu,}, data () {return {collapsed: false, openKeys: [], rootSubmenuKeys: [' / user'], list: [{key:'1'' Title: 'information management', path:'/ info',}, {key: '2customers, title:' user management', path:'/ user' Children: [{key: '2.1 users, title:' background users', path:'/ adminUser' Children: [{key: '2.1.1 users, title:' new users', path:'/ addAdminUser' Children: [{key: '2.1.1. 1pm, title: 'user xx', path:' / addAdminUserXX' }]}}, {key: '2.2' Title: 'foreground user', path:'/ frontUser',}]}],} }, created () {const openKeys = window.sessionStorage.getItem ('openKeys') if (openKeys) {this.openKeys = JSON.parse (openKeys)}}, methods: {toggleCollapsed () {this.collapsed =! this.collapsed }, onOpenChange (openKeys) {/ / saves the currently open parent menu in the cache window.sessionStorage.setItem ('openKeys', JSON.stringify (openKeys)) / / controls that only one const latestOpenKey = openKeys.find (key = > this.openKeys.indexOf (key) = =-1) is opened If (this.rootSubmenuKeys.indexOf (latestOpenKey) = =-1) {this.openKeys = openKeys;} else {this.openKeys = latestOpenKey? [latestOpenKey]: [];}}, menuClick ({key}) {/ / get the current key and jump to this.$router.push ({path: key})},}}; # app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased -moz-osx-font-smoothing: grayscale; padding: 50px;}

The router configuration is omitted here, and I believe all of you here will also! If you will not leave a message at the bottom, it will be taught by the teacher! )

If vue reports a compilation error You are using the runtime-only build of Vue, you can add a line runtimeCompiler: true to the configuration file of vue and run it again.

If a wrong NavigationDuplicated: Avoided redundant navigation to current location is reported when clicking on the same menu, you need to modify the Router setting (router/index.js):

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

Automatically render multi-level nested menus; refresh will save the selected menu; click the menu and put away all other expanded menus.

This is the end of the article on "how to use the Menu menu in AntDesign Vue". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.