ProLayout 高级布局
ProLayout 可以提供一个标准又不失灵活的中后台标准布局，同时提供一键切换布局形态、自动生成菜单、面包屑、Tabbar等功能。与 ProPage 配合使用可以页面标题、描述、功能操作等功能，并且提供低成本方案接入页脚工具栏。
何时使用
页面中需要承载内容时，可以使用 ProLayout 来减少布局成本。使用方式参考Pro Design Admin。
API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| layout | 布局方式，sidebar-nav：侧边菜单布局，sidebar-mixed-nav：侧边混合菜单布局，header-nav：顶部菜单布局，header-sidebar-nav：顶部通栏，侧边导航模式，mixed-nav：侧边&顶部菜单布局，header-mixed-nav：混合双列菜单布局，full-content：全屏内容布局 | sidebar-nav | sidebar-mixed-nav | header-nav | header-sidebar-nav | mixed-nav | header-mixed-nav | full-content | 'sidebar-nav' |
| content-compact | 内容区模式，wide：自适应，compact：定宽 1200px | wide | compact | 'wide' |
| content-compact-width | 内容区定宽布局宽度 | number | 1200 |
| content-padding | 内容区边距 | number | 16 |
| content-padding-top | 内容区上边距 | number | 16 |
| content-padding-bottom | 内容区下边距 | number | 16 |
| content-padding-left | 内容区左边距 | number | 16 |
| content-padding-right | l内容区右边距 | number | 16 |
| footer-enable | 页脚是否显示 | boolean | false |
| footer-fixed | 页脚是否固定 | boolean | true |
| footer-height | 页脚高度 | number | 32 |
| header-visible | 顶栏是否显示(控制是否有顶栏) | boolean | true |
| header-hidden | 顶栏是否隐藏(控制滚动或鼠标经过显示隐藏) | boolean | false |
| header-height | 顶栏高度 | number | 48 |
| header-mode | 顶栏显示模式，auto：自动显示和隐藏，auto-scroll：滚动显示和隐藏，fixed：固定，static：静止 | auto | auto-scroll| fixed| static | 'fixed' |
| header-theme | 顶栏主题，auto：跟随系统，dark：深色，light：浅色 | auto | dark| light | 'light' |
| header-toggle-sidebar-button | 是否显示顶栏切换侧边栏按钮 | boolean | true |
| is-mobile | 是否移动端显示 | boolean | false |
| sidebar-enable(v-model) | 侧边栏是否显示 | boolean | true |
| sidebar-collapse(v-model) | 侧边菜单是否折叠 | boolean | false |
| sidebar-collapsed-button | 是否显示侧边菜单折叠按钮 | boolean | true |
| sidebar-collapse-show-title | 侧边菜单折叠时，是否显示标题 | boolean | true |
| sidebar-extra-visible(v-model) | 侧边栏扩展区域是否显示 | boolean | - |
| sidebar-extra-collapse(v-model) | 侧边栏扩展区域是否折叠 | boolean | false |
| sidebar-extra-collapsed-width | 侧边栏扩展区域宽度 | number | 48 |
| sidebar-expand-on-hover(v-model) | 侧边栏菜单自动展开状态 | boolean | true |
| sidebar-fixed-button | 侧边菜单折叠按钮是否固定 | boolean | true |
| sidebar-hidden | 侧边栏是否隐藏(控制鼠标经过显示隐藏) | boolean | false |
| sidebar-mixed-width | 混合侧边栏宽度 | number | 80 |
| sidebar-theme | 侧边栏主题，auto：跟随系统，dark：深色，light：浅色 | auto | dark| light | 'light' |
| sidebar-width | 侧边栏宽度 | number | 210 |
| sidebar-collapsed-width | 侧边菜单折叠宽度 | number | 48 |
| tabbar-enable | tab是否显示 | boolean | true |
| tabbar-height | tab高度 | number | 30 |
| z-index | zIndex | number | 100 |
Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| side-mouse-leave | 侧边菜单鼠标移出事件 | () => void |
| toggle-sidebar | 侧边菜显示隐藏事件 | () => void |
Slots
| 插槽名 | 说明 | 类型 |
|---|---|---|
| logo | 侧边栏/顶栏logo | - |
| header | 顶栏区域 | - |
| mixed-menu | 侧边栏混合菜单区域 | - |
| menu | 侧边栏菜单区域 | - |
| side-extra | 侧边栏额外区域 | - |
| side-extra-title | 侧边栏额外区域标题 | - |
| tabbar | tabbar区域 | - |
| content | 内容区域 | - |
| content-overlay | 内容区域遮罩 | - |
| footer | 页脚区域 | - |
| extra | 额外扩展 | - |