Admin Layout

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

安装

``bash
npm install @taoya7/admin-layout-2


或


pnpm add @taoya7/admin-layout-2
`

使用

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

`vue



`

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 |

$3

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

$3

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

$3

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

$3

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

$3

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- |
| 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 | 页脚内容 |

布局模式说明

$3

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

$3

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