导航菜单

模式

在应用配置中设置：

import { setSettings } from '@fantastic-admin/settings'

export default setSettings({
  menu: {
    mode: 'head',
  },
})

专业版 扩展了以下 4 个主题：

风格 专业版

在应用配置中设置：

import { setSettings } from '@fantastic-admin/settings'

export default setSettings({
  menu: {
    style: '',
  },
})

暗黑导航菜单 专业版

在应用配置中设置：

import { setSettings } from '@fantastic-admin/settings'

export default setSettings({
  menu: {
    dark: true,
  },
})

主导航菜单点击模式

导航菜单模式为 side / head 时支持

在应用配置中设置：

import { setSettings } from '@fantastic-admin/settings'

export default setSettings({
  menu: {
    mainMenuClickMode: 'jump',
  },
})

当设置成 'jump' 或 'smart' 时，次导航菜单如果只有一个导航菜单时，点击主导航菜单会跳转并隐藏。

你只需要在某个主导航菜单下只保留一个次导航菜单，并且通过 meta.menu 将其隐藏，就像这样：

import MultilevelMenuExample from './modules/multilevel.menu.example'
import BreadcrumbExample from './modules/breadcrumb.example'

// 动态路由（异步路由、导航菜单路由）
const asyncRoutes: Route.recordMainRaw[] = [
  {
    meta: {
      title: $t('route.demo'),
      icon: 'menu-default',
    },
    children: [
      MultilevelMenuExample,
      BreadcrumbExample,
    ],
  },
  {
    meta: {
      title: '测试',
    },
    children: [
      {
        path: '/test',
        component: () => import('@/layouts/index.vue'),
        redirect: '/test/page',
        name: 'test',
        meta: {
          title: '演示页面',
          menu: false, // 注意，需要将这个导航菜单隐藏
        },
        children: [
          {
            path: 'page',
            name: 'testPage',
            component: () => import('@/views/test/page.vue'),
            meta: {
              title: '演示页面',
              menu: false,
            },
          },
        ],
      },
    ],
  },
]

次导航菜单只保持一个子项的展开

导航菜单模式为 side / head / single 时支持

在应用配置中设置：

import { setSettings } from '@fantastic-admin/settings'

export default setSettings({
  menu: {
    subMenuUniqueExpand: false,
  },
})

关闭后支持展开多个。

次导航菜单收起

导航菜单模式为 side / head / single 时支持

在应用配置中设置：

import { setSettings } from '@fantastic-admin/settings'

export default setSettings({
  menu: {
    subMenuCollapse: true,
  },
})

次导航菜单自动收起 专业版

导航菜单模式为 side / head / single 时支持

在应用配置中设置：

import { setSettings } from '@fantastic-admin/settings'

export default setSettings({
  menu: {
    subMenuAutoCollapse: true,
  },
})

当次导航处于收起状态时可以实现如下的效果：

开启次导航菜单展开/收起按钮

导航菜单模式为 side / head / single 时支持

在应用配置中设置：

import { setSettings } from '@fantastic-admin/settings'

export default setSettings({
  menu: {
    subMenuCollapseButton: true,
  },
})

快捷键

在应用配置中设置：

import { setSettings } from '@fantastic-admin/settings'

export default setSettings({
  menu: {
    hotkeys: true,
  },
})