@ljweb/layout-antdv

LayoutAdmin 组件

管理端页面级整体布局。

Props

参数	类型	默认值	说明
logo	string| slot	-	图标
title	string| slot	-	标题
menus	MenuConfig[]	[]	左侧菜单
layoutType	sidermenu|topmenu | mixedmenu	mixedmenu	布局类型。sidermenu: 显示在 Sider不显示 Header。topmenu：显示在 Header不显示 Sider。mixedmenu: menu.position 为 top 显示在 Header, 否则显示在 Sider
contentWidth	fluid| fixed	fluid	内容显示宽度。fluid：100% 宽度。fixed：固定宽度
fixedHeader	boolean	true	固定 Header
fixSiderbar	boolean	true	固定 Siderbar
autoHideHeader	boolean	false	向下滚动时隐藏 Header
sideCollapsed	boolean | auto | disabled	auto	折叠方式 boolean 时，初始化折叠状态 auto 时，根据页面宽度展开/折叠 disabled: 不折叠
sideCollapsedMouseAnimationDisabled	boolean	false	鼠标动画禁用
menuTriggerImmediately	boolean	true	点击立即切换页面
loading	boolean	false	显示 loading
loadingText	string	Loading...	loading 文字
prefixCls	string	-	样式名称前缀
i18nKeyPrefix	string	components.layout_admin	多语言 key 前缀
onInitRouteChange	Function	(callback: (path: string) => void) => void	初始化路由变更监听

事件

名称	回调参数	说明
menuClick	Function({ path: string, resolved: { path: string; resolved: boolean } })	菜单点击事件

LayoutAdmin.BreadcrumbProvider

提供路由面包屑数据给 BreadcrumbContainer 使用

Props

参数	类型	默认值	说明
breadcrumb	BreadcrumbConfig[]	-	面包屑(必须)

LayoutAdmin.BreadcrumbContainer

面包屑容器 如果嵌套使用时，只显示最外层的面包屑

Props

参数	类型	默认值	说明
breadcrumb	boolean | PresetBreadcrumbItem[] | ((routeBreadcrumbs: BreadcrumbConfig[]) => Exclude<PresetBreadcrumbItem, String>[])	true	传入的面包屑数据, 默认值：true;当为 true 时，使用路由的面包屑数据;当为 false 时，不显示面包屑

MenuConfigType

参数	类型	默认值	说明
key	string	-	唯一标识
title	string	-	标题
path	string	-	跳转地址
redirect	string	-	重定向地址
icon	any	-	svg格式地址或antd icon
target	_blank | _self	-	跳转方式。_self: 当前标签页打开。_blank：新标签页打开
position	top | side | sub	-	菜单位置。top:一级菜单。side:二级菜单。sub:三级菜单
display	boolean	false	菜单中不显示
breadcrumb	boolean	false	面包屑不显示

PresetBreadcrumbItem

type PresetBreadcrumbItem = BreadcrumbConfig | DefineComponent<any> | '_route'

BreadcrumbConfigType

参数	类型	默认值	说明
key	string	-	唯一标识
path	string	-	跳转地址
label	string	-	名称

AsyncTable

表格组件

Props

参数	类型	默认值	说明
columns	Column[]	-	表格列的配置描述（必须）
dataSource	(filter: { page: number;size: number;sortField?: string;sortOrder?: 'ASC' | 'DESC';}) => PagedDataSource | Promise<PagedDataSource>	-	数据源（必须）
rowsFieldName	string	rows	dataSource 返回数据字段
totolFieldName	string	total	dataSource 返回行数字段
pageNum	number	1	页数
pageSize	number	10	页大小
showSizeChanger	boolean	true	页大小是否可改变
showPagination	'auto' | boolean	auto	显示分页
pageURI	boolean	false	启用分页 URI 模式。例如: /users/1 /users?[pageNoKey]=1
pageNoKey	string	page	URI 模式下显示分页 current 的 key
pageSizeKey	string	size	URI 模式下显示分页 size 的 key
alert	{show：boolean; clear: (() => void) | true;} | boolean	false	显示汇总(column 配置 needTotal) 例如:{ show: true, clear: Function | true } | true
i18nKeyPrefix	string	components.async_table	多语言 key 前缀

PagedDataSourceTypes

参数	类型	默认值	说明
rows	any[]	-	列表数据集合
total	number	-	列表数据总条数

SearchForm

表格数据操作相关 Form 组件（包括搜索、筛选、批量操作、总数等）

Props

参数	类型	默认值	说明
prefixCls	string	-	组件样式名前缀
keywordPlaceholder	string	-	关键字筛选输入框占位符
keywordName	string	keyword	关键字名字，显示到 URI query 中的 key
keywordTypeOptions	Array<{ label: string; value: string | number; default?: true }>	-	关键字类型下拉框选项
keywordTypeName	string	keywordType	关键字类型名字，显示 URI query 中的 key
statusName	string	status	状态名字，显示到 URI query 中的 key
statusOptions	StatusOption[]	-	左上角状态搜索链接配置
keepStatusShown	boolean	false	一直显示所有状态（statusOptions 中的配置会抵消），默认：count > 0 的时候才显示
bulkAcitonOptions	{value: string | number;label: string;}[]	-	批量操作，如果没有选项则不显示
bulkApplying	boolean	-	apply 按纽 loading 状态
rowCount	number	-	dataSource 行数（显示在表格的右上角）, 当 >0 时显示批量操作, 当 scopedSlots.filterRight 有设置时，右上角行数不显示
i18nKeyPrefix	string	components.search_form	多语言 key 前缀

StatusOptionTypes

参数	类型	默认值	说明
value	string | number | undefined | Record<string, string | number>	-	状态值
label	string	-	状态名称
count	number	-	数量
tooltip	string	-	气泡提示内容
keepStatusShown	boolean	false	一直显示当前状态(option.keepStatusShown, prop.keepStatusShown, count > 0 任一条件满足即显示)

AvatarDropdown

头像下拉菜单

Props

参数	类型	默认值	说明
name	string	-	显示名
src	string	-	头像图片路径
avatarProps	Omit<OmitVue<AvatarProps>, 'src'>	-	头像大小(AvatarProps 内容详见 antdv Avatar 组件)
avatarColor	string	#fff	当没有头像图片但有用户名（显示用户名第一个字母），显示的文字颜色
avatarBackgroundColor	string	#f67280	当没有头像图片但有用户名（显示用户名第一个字母），显示的背景色
popoverDisabled	boolean	false	禁用 Popover 显示
prefixCls	string	-	组件样式名前缀
i18nKeyPrefix	string	components.avatar_dropdown	多语言 key 前缀

Breadcrumb

面包屑

Props

参数	类型	默认值	说明
items	Array<BreadcrumbItem | DefineComponent<any>>	-	设置 null, 将会根据$route 变化生成,如需传自定义参数，初始值必须设置成数组
i18nKeyPrefix	string	components.breadcrumb	多语言 key 前缀

BreadcrumbItemTypes

参数	类型	默认值	说明
label	string	-	名称
to	string	-	跳转地址
isLink	boolean	-	作为链接展示