Layout

default global layout interface

Use

Basic Use

By default, the component will generate routes from vue-router, Go to Router and Menu to view routing related usage

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

Top mode

Implement top bar mode by mode="horizontal"

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

Custom routes

Set routes attribute to enable custom 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>

Custom Transition

Provides animated transition effects by transition

Tip

When used transition, the page must have only one root element due to Transition component restrictions

The transition animation of the current route can be configured through meta.transition in the router

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

Custom keepAlive

enable cache by keep-alive, use include exclude max to Control cache

Tip

When enabled, all pages will be cached by default

include and exclude match the name of the page

It is recommended to name the pages that need to be cached starting with Keep, and then configure :include="/^Keep/" to use

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

Custom router

Tip

Starting from 1.2.0, the Menu will not be compatible with the complete URL address jump, which needs to be realized by custom router

First you should configure :router="false", then handle the click through the select event

<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>

Custom Group

Configure group: true for the meta in the routes to enable the group menu

<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>

Custom color

Configure menu colors by CSS variables

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>

Slots

More complex interface through slots

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>

Custom RouterView

Custom RouterView by the default slot

<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>

Props

Name	Description	Type	Options	Default
fixed-header	whether to fix the page header	boolean	-	true
keep-alive	whether to enable cache pages	boolean	-	false
include	match the name of the page that need to be cache, takes effect when keep-alive is true	string / array / RegExp	-	-
exclude	match the name of the page that do not need to be cache, takes effect when keep-alive is true	string / array / RegExp	-	-
max	limit the max number of cache, takes effect when keep-alive is true	string / number	-	-
transition	the animation name of transition pages	string	-	-
routes	current routes of menu	array	-	from `vue-router`
mode	menu display mode	string	horizontal / vertical	vertical
collapse	whether the menu is collapsed (available only in vertical mode)	boolean	-	false
ellipsis	whether the menu is ellipsis (available only in horizontal mode)	boolean	—	true
default-openeds	array that contains indexes of currently active sub-menus	Array	-	-
unique-opened	whether only one sub-menu can be active	boolean	-	false
menu-trigger	how sub-menus are triggered, only works when `mode` is ‘horizontal’	string	hover / click	hover
router	whether to automatically activate the route action	boolean	—	true
collapse-transition	whether to enable the collapse transition	boolean	-	true

Events

Name	Description	Parameters
select	callback function when menu is activated	index: index of activated menu, indexPath: index path of activated menu, item: the selected menu item
open	callback function when sub-menu expands	index: index of expanded sub-menu, indexPath: index path of expanded sub-menu
close	callback function when sub-menu collapses	index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu

Slots

Name	Description
default	custom implementation RouterView
logo	control logo display content, parameters { collapse }
menu	control menu display content, parameters { meta, path, redirect }
footer	control the footer of page display content
collapse-button	control the collapse button display content
header-left	control the header left display content
header-right	control the header right display content
header-bottom	control the header bottom display content

Layout #

Use #

Basic Use #

Top mode #

Custom routes #

Custom Transition #

Custom keepAlive #

Custom router #

Custom Group #

Custom color #

Slots #

Custom RouterView #

Props #

Events #

Slots #

Layout

Use

Basic Use

Top mode

Custom routes

Custom Transition

Custom keepAlive

Custom router

Custom Group

Custom color

Slots

Custom RouterView

Props

Events

Slots