Layout

简介

PlusLayout 是由 PlusBreadcrumb ， PlusHeader ， PlusSidebar 三个组件组合而成，它解决了布局的问题，提供开箱即用的菜单（多级）和面包屑功能。

基础用法

Layout API

Layout Attributes

名称	说明	类型	默认值	是否必须
breadcrumbProps	PlusBreadcrumb 的 props	object PlusBreadcrumb		否
headerProps	PlusHeader 的 props	objectPlusHeader		否
sidebarProps	PlusSidebar 的 props	objectPlusSidebar		否
scrollbarProps	scrollbar 的 props	false / objectScrollbarProps	{always:true}	否
backtop	backtop 的 props	false / objectBacktopProps	true	否
hasSidebarv0.1.15	是否需要侧边栏	boolean	true	否
hasHeaderv0.1.15	是否需要页头	boolean	true	否
hasBreadcrumbv0.1.15	是否需要面包屑	boolean	true	否

提示

子组件事件写法示例

如 PlusSidebar 的事件 toggleCollapse和 PlusHeader 的事件clickDropdownItem。 参考 vue 官方文档 透传 Attributes，如下示例

示例：

模板中

<PlusLayout
  :sidebarProps="{ onToggleCollapse: handleToggleCollapse }"
  :headerProps="{ onClickDropdownItem: handleClickDropdownItem}"
/>

setup 中

const handleClickDropdownItem = (dropdownItem: { label: string; value: string }) => {
  console.log(dropdownItem)
}

const handleToggleCollapse = (collapse: boolean) => {
  console.log(collapse)
}

Exposes

名称	说明	类型
plusSidebarInstance	PlusSidebar 的实例	object

Slots

插槽名	说明	作用域插槽参数
default	内容，一般需要给 RouterView 组件，配合路由信息展示页面
layout-extra	定义面包屑上方，header 下方的一块区域
breadcrumb-item-title	自定义PlusBreadcrumb 面包屑显示	route PlusRouteRecordRaw
header-left	自定义PlusHeader 头部左侧	{logo,title}
header-right	自定义PlusHeader 头部右侧	{userInfo,title}
sidebar-item	自定义 PlusSidebar 菜单的 menuItem	route PlusRouteRecordRaw
sidebar-sub	自定义 PlusSidebar 菜单的 subMenu	route PlusRouteRecordRaw
sidebar-item-title	自定义 PlusSidebar 菜单每项标题显示	route PlusRouteRecordRaw
sidebar-extra	自定义 PlusSidebar 在菜单头和菜单之间	route PlusRouteRecordRaw