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

npm-pages

v1.0.1

Published

- 集合了三个组件,包括`page-search`、`page-table`、`pagination`; - `config` 所需参数包含这三个组件内参数;(在同级下,并非包含数据) - `page-search`中;配置`searchInit`后默认有响应事件会执行查询,`notQuery=true`关闭。 - 分页组件`pagination`事件默认响应`config.query()`方法,刷新表格数据

Downloads

1

Readme

组件说明

  • 集合了三个组件,包括page-searchpage-tablepagination;
  • config 所需参数包含这三个组件内参数;(在同级下,并非包含数据)
  • page-search中;配置searchInit后默认有响应事件会执行查询,notQuery=true关闭。
  • 分页组件pagination事件默认响应config.query()方法,刷新表格数据

prop

  • config 基本配置数据
  • height 页面组件高度

config

| 参数 | 类型 | 是否必填 | 默认值 | 说明 | | ---------------- | :------: | :------: | :----: | ----------------------------: | | column | array | 是 | [] | 列数据;详细column | | data | array | 是 | [] | 渲染的数据 | | query | function | 否 | - | 获取表格数据的方法 | | pagination | object | 是 | {} | 分页数据;详细pagination | | hidePage | boolean | 否 | false | 是否隐藏分页组件 | | loading | boolean | 否 | false | 表格加载状态 | | showSummary | boolean | 否 | false | 是否需要底部汇总计算 | | events | object | 否 | {} | 响应事件;详细events | | search | array | 否 | [] | 搜索框数据;详细search | | searchInit | function | 否 | - | 初始化 搜索的 json 数据 | | searchLabelWidth | string | 否 | - | 搜索栏的 label-width 统一设置 | | rowClassName | boolean | 否 | false | 是否开启行间隔颜色 |

column 列


  • prop - array 数组 拼接字符串显示,不会计算底部汇总

    | 参数 | 类型 | 是否必填 | 默认值 | 说明 | | ---------- | :------------------: | :------: | :----: | ------------------------------------------: | | label | string | 是 | - | 标题 | | prop | string/array | 是 | - | 展示值的 key,开启 parent 时非必填 | | width | string | 否 | - | 宽度 | | fixed | boolean | 否 | false | 固定列 | | mode | string | 否 | - | 模式;可选值 icon、index、tag、function | | icon | string | 否 | - | mode=icon 时,展示的 icon 类名 | | type | string/function(row) | 否 | - | mode=tag 时,展示的 tag 风格 | | fn | function(row) | 否 | - | mode=function 时,处理数据后再渲染 | | index | boolean | 否 | false | 是否显示序号 | | selection | boolean | 否 | false | 是否显示多选框 | | parent | boolean | 否 | false | 是否增加二级数据 | | column | array | 否 | - | 二级的列; parent 开启时必填,参数同 column | | sum | object | 否 | - | 列汇总配置;详细sum | | apearation | array | 否 | - | 按钮数组;详细apearation | | align | string | 否 | center | 表格对齐方式,同 element-table | | rowClass | string | 否 | - | 单元格类名 |

mode 展示的模式

  • icon:展示的图标、icon=图标类名,目前仅支持 element-ui 内置 icon
  • index:序号下标,不需要绑定 prop
  • tag:el-tag 标签,type=string|function;tag 风格
  • function:特殊的展示数据时,可用函数处理,fn=(row)=>{}

pagination 分页组件数据


  • 会进行双向绑定,直接更改父级组件数据
  • 更改页数时,会直接调用 pops.query 方法获取列表数据

| 参数 | 类型 | 是否必填 | 默认值 | 说明 | | --------- | :----: | :------: | :----: | ---: | | pageIndex | number | 是 | - | 页码 | | pageSize | number | 是 | - | 页数 | | total | number | 是 | - | 总数 |

apearation 按钮数组


| 参数 | 类型 | 是否必填 | 默认值 | 说明 | | -------- | :--------------: | :------: | :---------: | -----------: | | label | string | 是 | true | 按钮文字 | | type | string | 否 | text | 按钮类型 | | size | string | 否 | small | 尺寸 | | disabled | Boolean/function | 否 | false | 按钮是否禁用 | | show | function | 否 | return true | 按钮是否显示 |

sum 列汇总配置


  • 需开启 showSummary = true

| 参数 | 类型 | 是否必填 | 默认值 | 说明 | | ----------- | :-----: | :------: | :----: | -------------------: | | notComputed | boolean | 否 | true | 是否汇总列 | | title | string | 否 | - | 不汇总,直接替换文本 | | unit | string | 否 | - | 汇总后的单位 | | toFixed | number | 否 | 0 | 汇总后保留的小数位数 | | isNaNTitle | string | 否 | - | 计算失败展示的文本 |

events 分页组件数据


| 参数 | 类型 | 是否必填 | 默认值 | 说明 | | ---------------- | :------: | :------: | :----: | -----------------: | | onChangePageSize | function | 否 | - | 更改页数时回调方法 |

search 搜索模块配置


  • mode 搜索框模式;可选值 :
    • daterange :日期范围选择;
    • monthrange :月份范围选择;
    • input:输入框;
    • select:下拉选项;
    • checkbox:复选框;
    • button:按钮;
  • value :范围日期选择时,对应数组;checkbox:对应 boolean
  • options : {label:'',vlaue:''}
  • 配置 searchInit 后默认有响应事件会执行查询,notQuery=true 关闭

| 参数 | 类型 | 是否必填 | 默认值 | 说明 | | ----------- | :----------: | :------: | :----: | ---------------------------------------: | | mode | string | 是 | - | 搜索框模式 | | labelWidth | string | 否 | - | label 宽度 | | label | string | 否 | - | 搜索 label 文字 | | value | string/array | 是 | - | 搜索的值 | | key | string | 否 | - | 搜索框的 key,返回搜索对象的 key | | notQuery | boolean | 否 | - | 是否关闭组件查询事件 | | placeholder | string | 否 | - | 输入框的占位符,按钮的文字;复选框的文字 | | size | string | 否 | mini | 按钮的尺寸 | | type | string | 否 | - | 按钮的类型 | | options | array | 否 | - | mode=select 时;下拉的选项 | | loading | boolean | 否 | false | mode=button 时,按钮加载状态 |

slot
  • page-search-before 具名插槽
    • 在搜索条件前加入额外的搜索;额外的搜索数据需求单独处理

@event 搜索栏事件


  • onSearch(item,data);事件

    • item:所触发事件的 item 数据
    • 搜索栏的数据对象 {key:value} 的形式返回
  • onChangePageSize(size);改变每页数量事件

  • onChangeCurrentPage(index);改变页码事件

  • rowBtnClick(row,index,btnItem);表格行按钮点击事件

    • row:每行的数据
    • index:按钮的下标
    • btnItem:按钮的 item 数据
  • rowClick(row) 点击某一行时

  • sortClick(column) 点击筛选时