0.1.0-beta.26 • Published 2 years ago

@xjmz/base-layout v0.1.0-beta.26

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

BaseLayout 组件

BaseLayout 可以提供一个标准的中后台布局方案,支持 topsidertop-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'-
logologo 图标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-