Menu

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

使用

基础用法

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

模式

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

<template>
  <pro-radio-button
    v-model="mode"
    :data="data"
  />
  <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 || []
      )
    })

    return {
      routes,
    }
  },
})
</script>
显示代码

使用插槽

提示

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

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

<template>
  <pro-menu
    :routes="routes"
    class="docs-menu"
  >
    <template #default="item">
      <pro-link :to="item.path">
        <i
          v-if="item.meta?.icon"
          :class="item.meta.icon"
        />
        <span v-if="item.meta?.title">
          {{ item.meta.title }}
        </span>
      </pro-link>
    </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
background-color菜单的背景色(仅支持 hex 格式)string-#ffffff
text-color菜单的文字颜色(仅支持 hex 格式)string-#303133
active-text-color当前激活菜单的文字颜色(仅支持 hex 格式)string-#409EFF
default-openeds当前打开的 sub-menu 的 index 的数组Array--
unique-opened是否只保持一个子菜单的展开boolean-false
menu-trigger子菜单打开的触发方式(只在 mode 为 horizontal 时有效)stringhover / clickhover
collapse-transition是否开启折叠动画boolean-true

插槽

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