menu

state.header

顶栏菜单

state.aside

侧边栏菜单

state.asideCollapse

侧边栏的折叠状态

actions.asideCollapseSet

介绍

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

参数

返回

promise

示例

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

actions.asideCollapseToggle

介绍

切换侧边栏展开和收缩。

参数

无

返回

promise

示例

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

actions.asideCollapseLoad

介绍

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

参数

无

返回

promise

示例

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

mutations.headerSet

介绍

设置顶栏菜单。

参数

示例

this.$store.commit('ibps/menu/headerSet', menu)

menu 数据格式

示例：

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

临时菜单

支持设置临时菜单，如果您在开发页面前需要先设计好菜单结构，可以只设置 title 字段，ibps 在生成菜单时会使用随机唯一 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: 'ibps Github',
        icon: 'github'
      },
      {
        path: 'https://juejin.im/user/57a48b632e958a006691b946/posts',
        title: '掘金',
        icon: 'globe'
      }
    ]
  }
]

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

svg 图标

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

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

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

取消默认图标

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

{
  icon: ''
}

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

mutations.asideSet

介绍

设置侧边栏菜单。

参数

示例

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

menu 的格式同 mutations.headerSet