Admin Layout

基于 Vue 2 的管理后台布局组件，支持多种布局模式、侧边栏折叠、移动端适配等功能。

安装

npm install @taoya7/admin-layout-2
# 或
pnpm add @taoya7/admin-layout-2

使用

// main.ts
import '@taoya7/admin-layout-2/lib/style.css'

<template>
  <AdminLayout
    :sider-collapse="siderCollapse"
    :header-height="56"
    :sider-width="220"
    @update:siderCollapse="siderCollapse = $event"
  >
    <template #header>
      <!-- 头部内容 -->
    </template>
    <template #sider>
      <!-- 侧边栏内容 -->
    </template>
    <template #tab>
      <!-- 标签页内容 -->
    </template>
    <template #default>
      <!-- 主内容区 -->
    </template>
    <template #footer>
      <!-- 页脚内容 -->
    </template>
  </AdminLayout>
</template>

<script>
import { AdminLayout } from '@taoya7/admin-layout-2'

export default {
  components: { AdminLayout },
  data() {
    return {
      siderCollapse: false
    }
  }
}
</script>

AdminLayout Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | | mode | 布局模式 | String | vertical / horizontal | vertical | | scrollMode | 滚动模式 | String | wrapper / content | content | | scrollElId | 滚动元素的 ID | String | — | __SCROLL_EL_ID__ | | scrollElClass | 滚动元素的自定义类名 | String | — | '' | | scrollWrapperClass | 滚动容器的自定义类名 | String | — | '' | | commonClass | 公共过渡动画类名 | String | — | transition-all-300 | | fixedTop | 是否固定头部和标签栏 | Boolean | — | true | | maxZIndex | 布局最大 z-index 值 | Number | — | 100 | | isMobile | 是否为移动端布局 | Boolean | — | false |

Header 头部配置

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | | headerVisible | 是否显示头部 | Boolean | — | true | | headerHeight | 头部高度（px） | Number | — | 56 |

Tab 标签栏配置

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | | tabVisible | 是否显示标签栏 | Boolean | — | true | | tabHeight | 标签栏高度（px） | Number | — | 48 | | tabClass | 标签栏自定义类名 | String | — | '' |

Sider 侧边栏配置

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | | siderVisible | 是否显示侧边栏 | Boolean | — | true | | siderCollapse | 侧边栏是否折叠 | Boolean | — | false | | siderWidth | 侧边栏展开宽度（px） | Number | — | 220 | | siderCollapsedWidth | 侧边栏折叠宽度（px） | Number | — | 64 | | siderClass | 侧边栏自定义类名 | String | — | '' | | mobileSiderClass | 移动端侧边栏自定义类名 | String | — | '' |

Content 内容区配置

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | | contentClass | 内容区自定义类名 | String | — | '' | | fullContent | 是否全屏内容（隐藏其他区域） | Boolean | — | false |

Footer 页脚配置

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | | footerVisible | 是否显示页脚 | Boolean | — | true | | footerHeight | 页脚高度（px） | Number | — | 48 | | fixedFooter | 是否固定页脚 | Boolean | — | false | | footerClass | 页脚自定义类名 | String | — | '' | | rightFooter | 页脚是否在右侧（vertical 模式下） | Boolean | — | false |

Events 事件

| 事件名 | 说明 | 回调参数 | | --- | --- | --- | | update:siderCollapse | 侧边栏折叠状态变化时触发 | (collapse: boolean) |

Slots 插槽

| 插槽名 | 说明 | | --- | --- | | header | 头部内容 | | tab | 标签栏内容 | | sider | 侧边栏内容 | | default | 主内容区 | | footer | 页脚内容 |

布局模式说明

vertical 垂直布局

┌──────────────────────────────┐
│           Header             │
├──────┬───────────────────────┤
│      │         Tab           │
│      ├───────────────────────┤
│ Sider│       Content         │
│      │                       │
│      ├───────────────────────┤
│      │        Footer         │
└──────┴───────────────────────┘

horizontal 水平布局

┌──────────────────────────────┐
│           Header             │
├──────────────────────────────┤
│             Tab              │
├──────┬───────────────────────┤
│      │                       │
│ Sider│       Content         │
│      │                       │
├──────┴───────────────────────┤
│           Footer             │
└──────────────────────────────┘