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