Menu

封装默认 Menu 通过传入路由或者自动获取路由生成导航

使用

基础用法

组件默认将从 vue-router 中获取路由生成路由，前往路由和菜单查看路由相关使用

<template>
  <pro-menu class="docs-menu" />
</template>

模式

通过传入 mode 自定义菜单模式

<template>
  <pro-radio-button
    v-model="mode"
    :data="data"
    style="margin-bottom: 16px"
  />
  <pro-menu
    :mode="mode"
    class="docs-menu"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const mode = ref('horizontal')
    const data = [
      { value: 'vertical', label: 'Vertical' },
      { value: 'horizontal', label: 'Horizontal' },
    ]

    return {
      mode,
      data,
    }
  },
})
</script>

自定义路由

通过传入 routes 自定义路由显示

<template>
  <pro-menu
    :routes="routes"
    class="docs-menu"
  />
</template>

<script>
import { defineComponent, computed } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  setup() {
    const router = useRouter()
    const routes = computed(() => {
      const _routes = router.options.routes
      return (
        _routes.find((item) => {
          return item.path === '/en-US/components/'
        })?.children || _routes
      )
    })

    return {
      routes,
    }
  },
})
</script>

自定义路由跳转

提示

从 1.2.0 起，菜单将不兼容完整的 URL 地址跳转，需要通过自定义路由跳转实现

首先应该配置 :router="false", 然后通过 select 事件处理点击

<template>
  <pro-menu
    :routes="routes"
    :router="false"
    mode="horizontal"
    class="docs-menu"
    @select="handleSelect"
  />
</template>

<script>
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import { isURL } from 'element-pro-components'

export default defineComponent({
  setup() {
    const router = useRouter()
    const routes = [
      {
        path: '/en-US/components/layout',
        meta: { title: 'Layout' },
      },
      {
        path: 'https://github.com/tolking/element-pro-components',
        meta: { title: 'Github' },
      },
      {
        path: 'https://github.com/tolking/element-admin-template',
        meta: { title: 'Template' },
      },
    ]

    function handleSelect(value) {
      isURL(value) ? window.open(value) : router.push(value)
    }

    return {
      routes,
      handleSelect,
    }
  },
})
</script>

自定义分组路由

为路由中 meta 配置 group: true，即可启用分组菜单

<template>
  <pro-menu
    :routes="routes"
    class="docs-menu"
  />
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const routes = [
      {
        path: '/one',
        component: { template: 'one page' },
        meta: { title: 'one', group: true },
        children: [
          {
            path: '/one/index',
            component: { template: 'one index page' },
            meta: { title: 'oneIndex' },
          },
          {
            path: '/one/info',
            component: { template: 'one info page' },
            meta: { title: 'oneInfo' },
          },
        ],
      },
      {
        path: '/two',
        component: { template: 'two page' },
        meta: { title: 'two', group: true },
        children: [
          {
            path: '/two/index',
            component: { template: 'two page' },
            meta: { title: 'twoIndex' },
          },
          {
            path: '/two/info',
            component: { template: 'two page' },
            meta: { title: 'twoInfo' },
          },
        ],
      },
    ]

    return { routes }
  },
})
</script>

配置颜色

通过 CSS 变量配置菜单颜色

<template>
  <pro-radio-button
    v-model="mode"
    :data="data"
    style="margin-bottom: 16px; margin-right: 16px"
  />
  <pro-radio-button
    v-model="collapse"
    :data="list"
    style="margin-bottom: 16px"
  />
  <pro-menu
    :mode="mode"
    :collapse="collapse"
    class="docs-menu"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const mode = ref('vertical')
    const collapse = ref(false)
    const data = [
      { value: 'vertical', label: 'Vertical' },
      { value: 'horizontal', label: 'Horizontal' },
    ]
    const list = [
      { value: true, label: 'Expand' },
      { value: false, label: 'Collapse' },
    ]

    return {
      mode,
      collapse,
      data,
      list,
    }
  },
})
</script>

<style scoped>
.docs-menu {
  --el-menu-active-color: #646cfd;
  --el-menu-bg-color: #37383f;
  --el-menu-hover-bg-color: #454654;
  --el-bg-color-overlay: var(--el-menu-hover-bg-color);
  --el-menu-text-color: #fff;
  --el-menu-hover-text-color: var(--el-menu-active-color);
}
</style>

使用插槽

提示

从 0.12.0 起，菜单内部将默认使用 svgicon 实现。如果想继续使用 fonticon 可以通过下面这种方式使用插槽实现

通过默认插槽可以很方便的定义如何显示菜单内容

<template>
  <pro-menu
    :routes="routes"
    class="docs-menu"
  >
    <template #default="item">
      <i
        v-if="item.meta?.icon"
        :class="item.meta.icon"
      />
      <span v-if="item.meta?.title">
        {{ item.meta.title }}
      </span>
    </template>
  </pro-menu>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const routes = [
      {
        path: '/en-US/components/menu',
        meta: { title: 'FontIcon', icon: 'el-icon-potato-strips' },
      },
      {
        path: '/en-US/components/menu',
        meta: { title: 'Development', icon: 'el-icon-cpu' },
      },
    ]

    return {
      routes,
    }
  },
})
</script>

配置

参数说明类型可选值默认值
routes当前程序路由array-从 vue-router 中获取
mode模式stringhorizontal / verticalvertical
collapse是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）boolean-false
ellipsis是否省略多余的子项（仅在横向模式生效）boolean—true
default-openeds当前打开的 sub-menu 的 index 的数组Array--
unique-opened是否只保持一个子菜单的展开boolean-false
menu-trigger子菜单打开的触发方式(只在 mode 为 horizontal 时有效)stringhover / clickhover
router是否自动跳转路由boolean—true
collapse-transition是否开启折叠动画boolean-true

事件

事件名说明参数
select菜单激活回调index: 选中菜单项的 index, indexPath: 选中菜单项的 index path, item: 选中菜单项
opensub-menu 展开的回调index: 打开的 sub-menu 的 index, indexPath: 打开的 sub-menu 的 index path
closesub-menu 收起的回调index: 收起的 sub-menu 的 index, indexPath: 收起的 sub-menu 的 index path

插槽

名称说明
-控制菜单显示内容，参数为 { meta, path, redirect } 等