@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 | - | 作为链接展示 |