前言
在前端开发中，我们经常需要使用到各种不同的 npm 包以及组件库。今天我们要介绍的是社区中比较流行的一个 npm 包：bianjie-block。
bianjie-block 是一款以区块为基础的 UI 组件库，该组件库定位于提供高质量、易用性良好的组件及基础工具，目前已经有很多开发者在应用中使用。这款组件库基于 Ant Design 开发，具有较好的可扩展性和开发体验。
安装
bianjie-block 可以通过 npm 安装：
npm install bianjie-block --save
引用
在项目中引入 bianjie-block：
import "bianjie-block/dist/bianjie-block.min.css";
其中，bianjie-block.min.css 文件是该组件库的样式文件。
组件使用
以 Button 组件为例，其使用方式如下：
import { Button } from "bianjie-block";
<Button type="primary">Primary</Button>在实际使用过程中，bianjie-block 的组件具有可定制化的属性，可以满足不同场景的需求。
开始使用
bianjie-block 的组件库中包含了很多的组件，供开发者在项目中使用。在这里，我们以 Table 组件为例，来介绍如何使用 bianjie-block。
基础用法
Table 是一个常用的组件，通过 Table 组件可以实现表格数据的展示，同时也包含了一些常见的操作，如排序、表格列的自定义等。
-- -------------------- ---- ------- ------ - ----- - ---- ---------------- ----- ---------- - - - ---- ---- ----- ----- ------- ---- --- -------- ---- ---- --- - ---- ----- -- - ---- ---- ----- ---- ------- ---- --- -------- ------- --- - ---- ----- -- - ---- ---- ----- ---- ------- ---- --- -------- ------- --- - ---- ----- -- -- ----- ------- - - - ------ ------- ---------- ------- ---- ------ -- - ------ ------ ---------- ------ ---- ----- -- - ------ ---------- ---------- ---------- ---- --------- -- -- ------ ----------------------- ----------------- ---
API 介绍
bianjie-block 的组件库包含了众多的 API，可以方便开发者使用。下面我们来介绍一下 Table 组件的 API。
Table
| 参数名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| dataSource | Array<Object> | [] | 数据源 |
| columns | Array<TableColumnProps> | [] | 表头列的配置描述 |
| size | "middle" / "small" | "middle" | 表格尺寸 |
| bordered | boolean | false | 是否展示外边框和列边框 |
| pagination | Object / false | {} | 分页器，设置为 false，则不展示和进行分页 |
| onChange | (pagination, filters, sorter, extra) => void | - | 分页、排序、筛选变化时触发，参数如下： pagination：{ current: number, pageSize: number, total: number } filters：{ [key: string]: any[] } sorter：{ column: TableColumnProps, order: "ascend" | "descend" | undefined, field: string, columnKey: string, multiple: number | false } extra： { currentDataSource: Array<Object> } |
| loading | boolean / SpinProps | false | 表格是否加载中 |
| rowSelection | Object | - | 表格行是否可选，默认不可选，但配置后会默认开启 selectionColumn |
| scroll | Object | - | 设置 horizontal 或 vertical 滚动，也可设置滚动区域的宽、高 |
| summary | (data: Record<string, any>) => ReactNode | - | 在表格尾部显示数据的行合计信息 |
| tableLayout | "auto" / "fixed" | "auto" | 表格是否收缩宽度到适应父容器 |
| title | () => ReactNode|ReactNode | - | 表格头部显示 |
| footer | () => ReactNode|ReactNode | - | 表格底部显示 |
TableColumnProps
| 参数名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| align | "left" / "right" / "center" | "left" | 对齐方式 |
| className | string | - | 列的 className |
| colSpan | number | - | 表头和表体的合并行数 |
| dataIndex | string | - | 列数据在数据项中对应的 key，支持 a.b.c 的嵌套写法 |
| ellipsis | boolean | false | 开启后，文字可能会被断行或者隐藏，鼠标移入时显示完整的内容 |
| filterDropdown | React.ReactNode|()=>React.ReactNode | - | 自定义的筛选菜单的 Render 函数。 |
| filterDropdownVisible | boolean | - | 是否显示表头筛选菜单 |
| filterIcon | React.ReactNode|()=>React.ReactNode | - | 自定义列头筛选图标的 Render 函数 |
| filterMultiple | boolean | true | 是否多选筛选 |
| filters | Array<{ text: string, value: string, children?: any } | string> | - | 表头的筛选菜单项 |
| fixed | boolean | "left"|"right" | - | 列是否固定 |
| onFilter | (value: any, record: Object) => boolean | - | 本地模式下，确定筛选的运算函数 |
| render | (text: any, record: T, index: number) => React.ReactNode | - | 列的渲染函数 |
| responsive | Array<string> | [ "sm" ] | 在哪些响应式屏幕下显示 |
| sorter | boolean | (a: Object, b: Object) => boolean|number | false | 排序函数，本地排序使用 |
| sortDirections | Array<"ascend" | "descend"> | [ "ascend", "descend" ] | 支持的排序方式，第一个为默认排序方式 |
| title | React.ReactNode | - | 列头显示文字 |
| width | number | string | - | 列宽 |
| onHeaderCell | (column: TableColumnProps) => {} | - | 用于定义表头单元格的属性 |
结语
通过以上的介绍，我们可以知道 bianjie-block 是一款优秀的组件库，具有完善的 API 和良好的开发体验，希望能对大家的开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055feb81e8991b448dda89