简介
zst-web 是一款基于 React 和 Antd 的前端 UI 组件库，它包含了一系列常用的 UI 组件，如按钮、表单、列表、对话框等，可以帮助我们快速构建用户界面。本文将介绍如何使用 zst-web。
安装
在使用 zst-web 之前，我们需要将其安装到我们的项目中。可以使用 npm，在终端中运行以下命令：
--- ------- -------
使用
zst-web 的使用非常简单，我们只需要在需要使用组件的页面中引入相应的组件即可。以 Button 组件为例：
------ - ------ - ---- ----------
-------- ------------- -
------ -
------------- -----------
--
-以上代码中，我们先将 Button 组件从 zst-web 中引入到我们的文件中，然后在 MyComponent 函数中使用该组件。
组件
zst-web 提供了以下组件：
Button
示例代码
------ - ------ - ---- ----------
-------- ------------- -
------ -
------------- -----------
--
-属性
| 属性名 |
类型 |
默认值 |
说明 |
| type |
string |
primary |
按钮类型，可选值：primary、ghost、dashed、link、text |
| shape |
string |
default |
按钮形状，可选值：default、circle、round |
| size |
string |
default |
按钮大小，可选值：default、large、small |
| disabled |
boolean |
false |
是否禁用 |
| loading |
boolean |
false |
是否处于加载状态 |
| icon |
React.ReactNode |
- |
图标，可以是 Antd 图标组件 |
| href |
string |
- |
点击时跳转的链接，仅在 type 为 link 时有效 |
Form
示例代码
------ - ----- ------ ------ - ---- ----------
-------- -------- -
----- -------- - -------- -- -
--------------------- ------ -- ----- -- --------
--
------ -
----- --------------------
----------
----------------
---------------
--------- --------- ----- -------- ------- ----- ---- ---------- ---
-
------ --
------------
----------
----------------
---------------
--------- --------- ----- -------- ------- ----- ---- ---------- ---
-
--------------- --
------------
-----------
------- -------------- ---------------------------------
------------
-------
--
-属性
| 属性名 |
类型 |
默认值 |
说明 |
| onFinish |
(values: object) => void |
- |
提交表单时的回调函数，回调函数的参数是表单值的对象 |
| onValuesChange |
(changedValues: object, allValues: object) => void |
- |
表单值发生改变时的回调函数，回调函数的第一个参数是已改变的字段值的对象，第二个参数是所有字段值的对象 |
| onFinishFailed |
(errorInfo: object) => void |
- |
提交表单且校验不通过时的回调函数，回调函数的参数是错误信息的对象 |
Form.Item 属性
| 属性名 |
类型 |
默认值 |
说明 |
| label |
string | React.ReactNode |
- |
标签 |
| name |
string |
- |
字段名，必须唯一 |
| rules |
object[] |
- |
校验规则 |
Table
示例代码
------ - ----- - ---- ----------
----- ---------- - -
- ----- ------- ---- --- -------- ---- ----- --
- ----- ------- ---- --- -------- ---- -------- --
--
----- ------- - -
- ------ ------- ---------- ------- ---- ------ --
- ------ ------ ---------- ------ ---- ----- --
- ------ ---------- ---------- ---------- ---- --------- --
--
-------- --------- -
------ -
------ ----------------------- ----------------- --
--
-属性
| 属性名 |
类型 |
默认值 |
说明 |
| dataSource |
object[] |
- |
数据源，每项数据是一个对象 |
| columns |
object[] |
- |
列的配置 |
columns 配置
| 属性名 |
类型 |
默认值 |
说明 |
| title |
string | React.ReactNode |
- |
列标题 |
| dataIndex |
string |
- |
数组中每个对象的 key，表示取出该列的值 |
| key |
string |
dataIndex |
唯一标识 |
| width |
string | number |
- |
列宽度 |
| render |
(text: any, record: object, index: number) => React.ReactNode |
- |
自定义列渲染 |
| sorter |
boolean | object |
- |
排序配置 |
| filter |
object |
- |
筛选配置 |
sorter 配置
| 属性名 |
类型 |
默认值 |
说明 |
| multiple |
boolean |
false |
是否开启多列排序 |
| compare |
(a: any, b: any) => number |
- |
自定义比较函数 |
filter 配置
| 属性名 |
类型 |
默认值 |
说明 |
| multiple |
boolean |
false |
是否开启多列筛选 |
| filters |
object[] |
- |
筛选项，每项是 { text: string, value: any } 的对象 |
| onFilter |
(value: any, record: object) => boolean |
- |
筛选函数 |
Dialog
示例代码
------ - ------- ------ - ---- ----------
-------- ------------- -
----- --------- ----------- - ----------------
----- ----------- - -- -- -
-----------------
--
----- ----------- - -- -- -
------------------
--
------ -
--
------- -------------------------- ---------------
------- ------------ ------- ----------------- -----------------------
------- ---------------
---------
---
--
-属性
| 属性名 |
类型 |
默认值 |
说明 |
| title |
string | React.ReactNode |
- |
标题 |
| visible |
boolean |
- |
是否可见 |
| width |
string | number |
520 |
宽度 |
| footer |
React.ReactNode | null |
- |
底部内容 |
| onCancel |
() => void |
- |
关闭时的回调函数 |
小结
本文介绍了如何安装和使用 zst-web UI 组件库，同时也对其中的常用组件进行了详细的介绍。希望本文可以帮助新手快速入门，也能给有经验的开发者提供一些参考。
来源：JavaScript中文网 ，转载请联系管理员！
本文地址：https://www.javascriptcn.com/post/6005583e81e8991b448d56f0