简介
@caldera-labs/processor-ui 是一个用于构建面向用户的前端组件的 npm 包。它提供了一些可定制的 UI，帮助你快速构建功能强大、易用且美观的前端应用程序。该 npm 包旨在帮助开发人员更快速地完成项目开发。
特性
- 提供多种组件，如字符串、数字、多选框、单选框、下拉框等等
- 支持表单验证，可以自定义校验规则
- 支持动态加载，用户可以根据自己的需求决定何时请求数据
- 支持本地存储数据，当用户离开当前页面重新进入时，可以保存之前填写的数据
使用说明
安装
通过 npm 进行安装：
npm install @caldera-labs/processor-ui
安装完成后，可以导入相关模块：
import { Form } from "@caldera-labs/processor-ui";API
Form
<Form
config={config}
onSubmit={handleSubmit}
onChange={handleChange}
onError={handleError}
localStorageKey={localStorageKey}
/>config: Object，表单的配置项，详见 表单配置项onSubmit: Function，表单提交时执行的函数onChange: Function，表单输入值变更时执行的函数onError: Function，表单验证未通过时执行的函数localStorageKey: String，表单数据本地存储的 key
表单配置项
-- -------------------- ---- -------
----- ------ - -
------- -
-
----- --- -- ------- -------------
------ --- -- ----
----- --- -- ----
------ --- -- ---
--------- ------ -- ----
-------- --- -- ------- -------------
------ --- -- --------- -----------------
----- --- -- -----------------
--
--
----- --- -- -----------------
--字段类型
text: 单行文本输入框password: 密码输入框textarea: 多行文本输入框number: 数字输入框checkbox: 多选框radio: 单选框select: 下拉框
字段验证规则
const rules = [
{
pattern: /^.{6,}$/, // 正则表达式
message: "密码至少6位", // 校验不通过时的提示消息
},
];示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- -----------------------------
------ ------- -------- ----- -
----- ------ - -
------- -
-
----- -------
------ -----
----- -------
------ ---
--------- -----
------ -
-
-------- ----------
-------- ---------
--
--
--
-
----- -----------
------ -----
----- -----------
------ ---
--------- -----
------ -
-
-------- ----------
-------- ---------
--
--
--
-
----- --------
------ -----
----- ---------
------ ---
--------- -----
-------- ----- -----
--
-
----- ---------
------ -----
----- -------
------ ---
--------- -----
-------- ------ ----- ----- ----- ------
--
-
----- -----------
------ -----
----- --------
------ ---
--------- -----
-------- ------ ----- ----- -------
--
--
--
----- ------------ - ------ -- -
------------------
--
----- ------------ - ------ -- -
------------------
--
----- ----------- - -------- -- -
--------------------
--
------ -
-----
---------------
-----------------------
-----------------------
---------------------
-------------------------------
--
--
-总结
@caldera-labs/processor-ui 是一个非常实用的 npm 包，它提供了多种组件，可以快速构建出功能强大、易用且美观的前端应用程序。我们可以通过在项目中使用它，来提高开发效率和用户体验。虽然它的 API 相对简单，但它功能强大，能够满足我们大部分的开发需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f93238a385564ab702b