Layout

基础的中后台布局界面组件

使用

基础用法

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

顶栏模式

通过配置 mode="horizontal" 作用于菜单实现顶栏模式

<template>
  <pro-layout
    mode="horizontal"
    class="docs-layout"
  />
</template>
显示代码

自定义路由

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

<template>
  <pro-layout
    :routes="routes"
    class="docs-layout"
  />
</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>
显示代码

自定义过度动画

通过配置 transition 实现定义过度动画

提示

当配置 transition 后,由于 Transition 组件限制,页面必须仅有一个根元素

自定缓存

通过配置 keep-alive 启用缓存,include exclude max 控制缓存内容

提示

启用后默认将缓存所有页面

include exclude 匹配的是页面的 name

推荐将需要缓存的页面以 Keep 开头命名,然后配置 :include="/^Keep/" 使用

插槽

通过插槽实现更复杂的界面

<template>
  <pro-radio-button
    v-model="mode"
    :data="data"
    style="margin-bottom: 16px"
  />
  <pro-layout
    :mode="mode"
    class="docs-layout"
  >
    <template #logo="{ collapse }">
      <span style="line-height: 54px">
        {{ collapse ? 'L' : 'logo' }}
      </span>
    </template>
    <template #footer>
      <p>footer</p>
    </template>
    <template #header-left>
      <span>header-left</span>
    </template>
    <template #header-right>
      <span>header-right</span>
    </template>
    <template #header-bottom>
      <span>header-bottom</span>
    </template>
    <template #default>
      <p>default</p>
    </template>
  </pro-layout>
</template>

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

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

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

自定义 RouterView

通过默认插槽改写 RouterView

<template>
  <pro-layout class="docs-layout">
    <router-view>
      <template #default="{ Component, route }">
        <transition
          name="el-fade-in"
          mode="out-in"
          appear
        >
          <pro-card
            :key="route.fullPath"
            shadow="never"
          >
            <component :is="Component" />
          </pro-card>
        </transition>
      </template>
    </router-view>
  </pro-layout>
</template>
显示代码

配置

参数说明类型可选值默认值
fixed-header是否固定页面头部boolean-true
transition定义页面过度渐变动画string--
keep-alive是否启用缓存页面boolean-false
include匹配需要缓存页面的 name,当 keep-alive 为 true 时生效string / array / RegExp--
exclude匹配不需要缓存页面的 name,当 keep-alive 为 true 时生效string / array / RegExp--
max限制组件缓存的最大数量,当 keep-alive 为 true 时生效string / number--
routes当前程序路由array-vue-router 中获取
mode导航菜单模式stringhorizontal / verticalvertical
collapse是否水平折叠收起菜单(仅在 mode 为 vertical 时可用)boolean-false
ellipsis是否省略多余的子项(仅在横向模式生效)booleantrue
background-color菜单的背景色(仅支持 hex 格式)string-#ffffff
text-color菜单的文字颜色(仅支持 hex 格式)string-#303133
active-text-color当前激活菜单的文字颜色(仅支持 hex 格式)string-#409E
default-openeds当前打开的 sub-menu 的 index 的数组Array--
unique-opened是否只保持一个子菜单的展开boolean-false
menu-trigger子菜单打开的触发方式(只在 mode 为 horizontal 时有效)stringhover / clickhover
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

插槽

插槽名说明
default自定义实现 RouterView
logo自定义 Logo,参数为 { collapse } collapse-当前菜单栏是否折叠
menu控制菜单显示内容,参数为 { meta, path, redirect } 等
footer页脚内容
header-left头部左侧内容
header-right头部右侧内容
header-bottom头部下面内容