Admin

应用于管理平台的界面布局

AdminClassic

管理平台经典布局结构

实例

快速应用布局

<template>
  <LayoutAdminClassic>
    <template #header>
      <div>Header</div>
    </template>
    <template #aside>
      <div>Aside</div>
    </template>
    <template #breadcrumb>
      <div>Breadcrumb</div>
    </template>
    <template #footer>
      <div>Footer</div>
    </template>

    Main content
  </LayoutAdminClassic>
</template>

<script setup>
import { LayoutAdminClassic } from 'v-layouts'
</script>

Header

Aside

Breadcrumb

Main content

Footer

收起/展开侧边栏

<template>
  <LayoutAdminClassic :aside-width="asideWidth">
    <template #aside>
      <div>Aside</div>
    </template>

    <div>
      Main content
      <button
        @click="collapse = !collapse"
      >collapse</button>
    </div>
  </LayoutAdminClassic>
</template>

<script setup>
import { ref, computed } from 'vue'
import { LayoutAdminClassic } from 'v-layouts'

const collapse = ref(false)
const asideWidth = computed(() => collapse.value ? '70px' : '200px')
</script>

收起的宽度70px0px

Aside

Main content

通过设置 aside-width 来切换侧边栏的宽度，若希望达到将侧边栏完全收起的效果，将宽度设置为 0 即可

条件渲染区域

通过条件渲染将布局的 header、aside、breadcrumb 与 footer 等区域进行切换打开/关闭状态

在布局区域关闭后，剩余可见的区域会自动对空间进行填充

<template>
  <LayoutAdminClassic aside-position="right">
    <template #aside v-if="visible">
      <div>Aside</div>
    </template>

    <div>
      Main content
      <button
        @click="visible = !visible"
      >change visible</button>
    </div>
  </LayoutAdminClassic>
</template>

<script setup>
import { ref } from 'vue'
import { LayoutAdminClassic } from 'v-layouts'

const visible = ref(true)
</script>

区域条件渲染

Header

Aside

Breadcrumb

Main content

Footer

侧边栏独占列

在默认布局中，标题栏 header 独占一行，可通过设置 aside-full-height 属性让侧边栏 aside 独占一列

<LayoutAdminClassic aside-full-height>
  <template #aside>
    <div>Aside</div>
  </template>

  <div>Main content</div>
</LayoutAdminClassic>

Header

Aside

Breadcrumb

Main content

Footer

Props

布局的属性

type CssValue = string | number

interface AdminClassicProps {
  /**
   * 布局容器总宽度
   * @default `100vw`
   */
  width?: CssValue
  /**
   * 布局容器总高度
   * @default `100vh`
   */
  height?: CssValue
  /**
   * 头部栏高度
   * @default 60
   */
  headerHeight?: CssValue
  /**
   * 底部栏高度
   * @default 60
   */
  footerHeight?: CssValue
  /**
   * 主内容容器自定义扩展样式
   */
  mainClass?: StyleValue
  /**
   * 面包屑高度
   * @default 60
   */
  breadcrumbHeight?: CssValue
  /**
   * 侧边栏宽度
   * @default 260
   */
  asideWidth?: CssValue
  /**
   * 侧边栏位置
   */
  asidePosition?: 'left' | 'right'
  /**
   * 侧边栏独占一列
   * @default false
   */
  asideFullHeight?: boolean
}

插槽

在界面布局中，布局区域均使用具名插槽进行内容分发

• default 默认插槽对应了主内容区域
• header 头部区域，默认情况下独占一行
• aside 侧边栏
• breadcrumb 面包屑
• footer 底部栏