跳到主要内容

Menu 菜单

何时使用​

  • 导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。

组件示例​

组件属性​

属性说明类型默认值
dataSource

菜单的数据源

MenuDataSource[]

[
  {
    label: "菜单项一",
    key: "key1",
      children: [
        {
          label: "选项一",
          key: "key1-1",
          tag: {
            text: "初始化",
            color: "blue",
          },
        },
        {
          label: "选项二",
          key: "key1-2",
        },
      ],
    },
    {
      isDivider: true,
    },
    {
      label: "菜单项二",
      key: "key2",
      children: [
        {
          label: "选项一",
          key: "key2-1",
        },
        {
          label: "选项二",
          key: "key2-2",
        },
      ],
    },
    {
      label: "菜单项三",
      key: "key3",
      disabled: true,
    },
  ]
direction

菜单第一层展示方向

'ver' | 'hoz'

-
footer

自定义菜单尾部

string

-
header

自定义菜单头部

string

-
mode

设置子菜单打开的模式

'inline' | 'popup'

inline

onItemClick

点击菜单项触发的事件

(key: string,item: MenuDataSource, event: any) => void

-
onSelect

选中或取消选中菜单项时触发的事件

(selectedKeys: string[] ,extraObj: any) => void

-
popupAlign

弹层的对齐方式

'follow' | 'outside'

'follow'

selectMode

菜单组件的选择模式

'single' | 'multiple' | false

false

triggerType

设置子菜单打开的触发行为

'click' | 'hover'

'click'

Copyright © 2024钉钉（中国）信息技术有限公司和／或其关联公司浙ICP备18037475号-4