Layout

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

使用

基础用法

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

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

<style>
.docs-layout {
  --pro-layout-height: 400px;
  --pro-layout-index-header: 1;
  border: 1px solid var(--c-border);
  max-height: 400px;
}
</style>
显示代码

顶栏模式

通过配置 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 || []
      )
    })

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

插槽

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

<template>
  <pro-radio-button
    v-model="mode"
    :data="data"
  />
  <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 #main-top>
      <p>main-top</p>
    </template>
    <template #main-bottom>
      <p>main-bottom</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>
显示代码

配置

参数说明类型可选值默认值
fixed-header是否固定页面头部boolean-true
fixed-main是否固定页面主体boolean-false
transition定义页面过度渐变动画string--
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-#409E
default-openeds当前打开的 sub-menu 的 index 的数组Array--
unique-opened是否只保持一个子菜单的展开boolean-false
menu-trigger子菜单打开的触发方式(只在 mode 为 horizontal 时有效)stringhover / clickhover
collapse-transition是否开启折叠动画boolean-true

插槽

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