Layout

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

使用

基础用法

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

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

顶栏模式

通过配置 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 组件限制，页面必须仅有一个根元素

可以通过路由中 meta.transition 配置当前路由的过渡动画

<template>
  <pro-layout
    transition="el-fade-in"
    class="docs-layout"
  />
</template>

自定缓存

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

提示

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

include exclude 匹配的是页面的 name

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

<template>
  <pro-layout
    keep-alive
    :include="/^Keep/"
    class="docs-layout"
  />
</template>

自定义路由跳转

提示

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

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

<template>
  <pro-layout
    :routes="routes"
    :router="false"
    class="docs-layout"
    @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-layout
    :routes="routes"
    class="docs-layout"
  />
</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 变量配置菜单颜色

VerticalHorizontal

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

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

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

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

<style scoped>
.docs-layout {
  --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>

插槽

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

Menu verticalMenu horizontal

header-left

header-right

header-bottom

default

footer

<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 #collapse-button="{ collapse, toggleShow }">
      <el-icon
        :size="30"
        @click="toggleShow"
      >
        <Expand v-if="collapse" />
        <Fold v-else />
      </el-icon>
    </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'
import { Expand, Fold } from '@element-plus/icons-vue'

export default defineComponent({
  components: {
    Expand,
    Fold,
  },
  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	导航菜单模式	string	horizontal / vertical	vertical
collapse	是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）	boolean	-	false
ellipsis	是否省略多余的子项（仅在横向模式生效）	boolean	—	true
default-openeds	当前打开的 sub-menu 的 index 的数组	Array	-	-
unique-opened	是否只保持一个子菜单的展开	boolean	-	false
menu-trigger	子菜单打开的触发方式(只在 mode 为 horizontal 时有效)	string	hover / click	hover
router	是否自动跳转路由	boolean	—	true
collapse-transition	是否开启折叠动画	boolean	-	true

事件

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

插槽

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

Layout #

使用 #

基础用法 #

顶栏模式 #

自定义路由 #

自定义过渡动画 #

自定缓存 #

自定义路由跳转 #

自定义分组路由 #

自定义颜色 #

插槽 #

自定义 RouterView #

配置 #

事件 #