npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ljweb/layout-antdv

v0.3.19

Published

Layout by vue-design-vue

Downloads

42

Readme

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