0.1.0-beta.26 • Published 2 years ago
@xjmz/base-layout v0.1.0-beta.26
BaseLayout 组件
BaseLayout 可以提供一个标准的中后台布局方案,支持 top、sider、top-sider 布局形态; 可以使用 BaseLayout 来减少布局成本。
安装
pnpm add @mz/base-layout代码演示
import { BaseLayout } from "@mz/base-layout";
import { defineComponent } from "vue";
export default defineComponent({
name: "demo",
setup() {
return () => <BaseLayout title="XX 管理平台"></BaseLayout>;
},
});Props 属性
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| type | 布局形态 | 'top' | 'sider' | 'top-sider' | 'top-sider' | - |
| title | 标题 | string | 'BaseLayout' | - |
| logo | logo 图标 | string | '' | - |
| logoLink | 点击 logo 跳转链接 | string | '/' | - |
| avatar | 头像 | string | '' | - |
| nickName | 昵称 | string | 'Admin' | - |
Slots 插槽
| 插槽名称 | 说明 | 参数 |
|---|---|---|
| default | 主内容区 | - |
| hdLogo | 顶部 logo 区 | - |
| hdNav | 顶部导航区 | collapsed:bool |
| hdExtra | 顶部扩展区 | - |
| sdLogo | 侧边栏 logo 区 | - |
| sdNav | 侧边栏导航区 | - |
| sdExtra | 侧边栏扩展区 | - |
事件
| 事件名称 | 说明 | 回调参数 | 版本 |
|---|---|---|---|
| collapsed | 侧边栏展开、收起事件 | (collapsed:bool) => void | - |
0.1.0-beta.26
2 years ago