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 color

Configure menu colors by CSS variables

<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

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

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

NameDescriptionTypeOptionsDefault
fixed-headerwhether to fix the page headerboolean-true
keep-alivewhether to enable cache pagesboolean-false
includematch the name of the page that need to be cache, takes effect when keep-alive is truestring / array / RegExp--
excludematch the name of the page that do not need to be cache, takes effect when keep-alive is truestring / array / RegExp--
maxlimit the max number of cache, takes effect when keep-alive is truestring / number--
transitionthe animation name of transition pagesstring--
routescurrent routes of menuarray-from vue-router
modemenu display modestringhorizontal / verticalvertical
collapsewhether the menu is collapsed (available only in vertical mode)boolean-false
ellipsiswhether the menu is ellipsis (available only in horizontal mode)booleantrue
default-openedsarray that contains indexes of currently active sub-menusArray--
unique-openedwhether only one sub-menu can be activeboolean-false
menu-triggerhow sub-menus are triggered, only works when mode is ‘horizontal’stringhover / clickhover
routerwhether to automatically activate the route actionbooleantrue
collapse-transitionwhether to enable the collapse transitionboolean-true

Events

NameDescriptionParameters
selectcallback function when menu is activatedindex: index of activated menu, indexPath: index path of activated menu, item: the selected menu item
opencallback function when sub-menu expandsindex: index of expanded sub-menu, indexPath: index path of expanded sub-menu
closecallback function when sub-menu collapsesindex: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu

Slots

NameDescription
defaultcustom implementation RouterView
logocontrol logo display content, parameters { collapse }
menucontrol menu display content, parameters { meta, path, redirect }
footercontrol the footer of page display content
header-leftcontrol the header left display content
header-rightcontrol the header right display content
header-bottomcontrol the header bottom display content