menu

state.header

顶栏菜单

state.aside

侧边栏菜单

state.asideCollapse

侧边栏的折叠状态

actions.asideCollapseSet

介绍

设置侧边栏展开或者收缩。

参数

参数名 介绍 必选 值类型 可选值 默认值
collapse 新的值 必选 Boolean

返回

promise

示例

// 折叠侧边栏菜单
this.$store.dispatch('d2admin/menu/asideCollapseSet', true)
// 展开侧边栏菜单
this.$store.dispatch('d2admin/menu/asideCollapseSet', false)

actions.asideCollapseToggle

介绍

切换侧边栏展开和收缩。

参数

返回

promise

示例

this.$store.dispatch('d2admin/menu/asideCollapseToggle')

actions.asideCollapseLoad

介绍

从持久化数据读取侧边栏展开或者收缩。

参数

返回

promise

示例

this.$store.dispatch('d2admin/menu/asideCollapseLoad')

mutations.headerSet

介绍

设置顶栏菜单。

参数

参数名 介绍 必选 值类型 可选值 默认值
menu 菜单 必选 Array

示例

this.$store.commit('d2admin/menu/headerSet', menu)
字段名 介绍 必选 值类型 默认值
path 路由 path String lodash.uniqueId('d2-menu-empty-')
title 菜单名称 必选 String 未命名菜单
icon 菜单图标 String
iconSvg SVG 菜单图标 String
children 子菜单数据 Array

示例:

[
  {
    path: '/index',
    title: '首页',
    icon: 'home'
  },
  {
    path: '/demo',
    title: '示例',
    icon: 'puzzle-piece',
    children: [
      {
        path: '/demo/plugins',
        title: '插件',
        icon: 'plug'
      }
    ]
  }
]

临时菜单

支持设置临时菜单,如果您在开发页面前需要先设计好菜单结构,可以只设置 title 字段,D2Admin 在生成菜单时会使用随机唯一 id 区分菜单项目,并且在点击时提示这是一个临时菜单。

设置临时菜单的示例:

[
  {
    title: '空菜单演示',
    icon: 'folder-o',
    children: [
      {
        title: '正在开发 1',
        children: [
          { title: '正在开发 1-1' },
          { title: '正在开发 1-2' }
        ]
      },
      { title: '正在开发 2' },
      { title: '正在开发 3' }
    ]
  }
]

外部链接

支持设置外部链接,您可以直接这样写:

[
  {
    title: '跳转外部链接',
    icon: 'link',
    children: [
      {
        path: 'https://github.com/d2-projects/d2-admin',
        title: 'D2Admin Github',
        icon: 'github'
      },
      {
        path: 'https://juejin.im/user/57a48b632e958a006691b946/posts',
        title: '掘金',
        icon: 'globe'
      }
    ]
  }
]

https:// 或者 http:// 开头的 path 会被当做外部链接处理。

svg 图标

如果您不满足于 fontawesome 图表库,或者需要自己定制菜单图标,可以在菜单中增加 iconSvg 字段:

{
  title: 'svg 菜单图标',
  iconSvg: 'd2admin',
  children: [
    { title: 'add', iconSvg: 'add' },
    { title: 'alarm', iconSvg: 'alarm' }
  ]
}

iconSvg 字段可选值同 icon-svg 的 name 属性。

取消默认图标

如果 icon 字段不设置,渲染时会自动根据是否有子菜单选择性渲染 file-ofolder-o 图标。如果您不希望发生这种表现,请在菜单属性中显式声明 icon 等于空字符串:

{
  icon: ''
}

这样会将此菜单设置为不显示任何图标。

mutations.asideSet

介绍

设置侧边栏菜单。

参数

参数名 介绍 必选 值类型 可选值 默认值
menu 菜单 必选 Array

示例

this.$store.commit('d2admin/menu/asideSet', menu)

menu 的格式同 mutations.headerSet

最后更新: 11/16/2018, 10:28:22 AM