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 | - |