Menu 菜单

继承el-menu原生菜单的所有属性

提示

为与router的语义化，原生index已被替换成path

基础用法

添加图标

支持添加el图标库图标，可接受string,vNode或者自定义函数返回一个图标组件

多级子菜单

如果需要多级菜单，请配置children，内部默认处理sub-menu

分组菜单

如果需要对菜单进行分组，请配置group，内部默认处理menu-item-group

提示

配置了groups，子项请不要配置children

水平菜单

• 配置原生属性mode即可
• 配置ellipsis可以对溢出菜单省略

激活菜单

支持传入默认激活参数default-active，此后内部将会自动处理激活菜单

提示

激活菜单需要启用router模式，同时，需要全局注册vue-router,一般情况下在main.ts中已经注册过

配置项

Menu需要配置menuConfig

由于menu组件会继承el-menu所有属性，需要时进行配置即可，以下为扩展属性：

参数	类型	说明	默认	必填
children	MenuItemProps[]	菜单子项	[]	-
path	string	原生index	-	√
subMenu	object	el-sub-menu属性	-	-
visible	boolean	是否可见	true	-
title	string	菜单名称	-	√
group	boolean	是否使用分组，如果配置group,子项请勿配置children	false	-
icon	支持el图标库图标，也可以自定义图标（自定义函数返回）	图标	-	-
slots	VNode | VNode[]	菜单插槽	-	-

IMenuProps 类型

/**
 * menu 类型定义
 */
export interface IMenuProps extends Partial<ElMenuProps> {
  /**
   * 最大子菜单数，默认 3级
   */
  level?: number
  items: MenuItemProps[]
}

MenuItemProps类型

/**
 * menu-item类型
 */
export interface MenuItemProps extends Partial<ElMenuItemProps> {
  /**
   * 子菜单属性
   */
  children?: MenuItemProps[]
  /**
   * 重写index路由路径,开启router时需要该属性
   */
  path?: string
  /**
   * 子菜单属性
   */
  subMenu?: ElSubMenuProps
  /**
   * 是否可见
   */
  visible?: boolean
  /**
   * 名称
   */
  title?: string
  /**
   * 分组
   * 如果配置group,子项请勿配置children
   */
  group?: boolean
  /**
   * 图标
   */
  icon?: string | (() => VNode)
  /**
   * 菜单插槽
   */
  slots?: () => Record<string, VNode<any, any, any> | VNode<any, any, any>[]>
}