组件库概述
在复杂的前端开发场景中,表单管理和请求处理经常是开发者遇到的棘手问题。传统表单组件如 Naive UI 中的 NForm
,虽然功能丰富,但表单数据的管理和状态维护对开发者来说是一个不小的挑战。特别是在处理动态表单项、复杂的嵌套结构、弹窗表单和抽屉表单等场景时,开发者往往需要花费大量时间去手动管理数据和状态同步。
为了解决这些问题,我们开发了基于 Naive UI 的二次封装组件库,它在保持 Naive UI 原有优势的基础上,提供了一套简化表单管理、提高开发效率的解决方案。以下是组件库中的主要组件及其功能。
组件概述
1. ProForm 组件
ProForm
是对 Naive UI 中 NForm
的二次封装,旨在简化表单数据管理。开发者不再需要手动管理复杂的表单数据,组件内置了数据管理功能,同时对 Naive UI 的各种表单组件(如 NInput
、NDatePicker
等)进行了二次封装,扩展了超过 30 个表单组件。这些封装后的组件增加了只读模式,可以通过 button
标签的 attr-type
属性实现表单的提交和重置功能。
此外,ProForm
还增加了一些插槽,允许开发者自定义校验 UI 或者扩展 extra
内容,以便更灵活地处理表单校验和 UI 定制需求。
示例效果图
2. ProFormList 组件
ProFormList
是一个允许开发者轻松录入结构化列表数据的组件,不需要手动维护数据源。它自带增删操作,并且支持嵌套操作,允许用户自定义复杂的数据结构管理场景。无论是简单的数组表单,还是多层嵌套的复杂结构,ProFormList 都能胜任。
示例效果图
3. 弹窗表单
该组件将表单与弹窗相结合,允许在弹窗中管理表单数据。相比于传统的弹窗组件,这个组件进一步封装了表单和弹窗的交互,提供了一套简便的弹窗表单管理方法,适合在复杂的场景下使用,例如需要多个弹窗之间的状态协调时。
示例效果图
4. 抽屉表单
抽屉表单 类似于弹窗表单,它将表单和抽屉结合起来,提供了一套简化抽屉管理的方法。开发者可以轻松地在抽屉中使用表单组件,从而实现更复杂的抽屉场景管理需求。该组件特别适合在需要在抽屉中进行多步骤或复杂表单输入时使用。
示例效果图
5. 查询表单
查询表单 通常与表格组件一起使用,提供了一种灵活的方式来实现数据查询。由于其表现形式相对固定,因此支持通过 JSON 格式进行配置,方便开发者根据需求快速调整和扩展。这个组件同样支持完善的类型推导,可以轻松地集成到类型严格的项目中。
示例效果图
6. 表格
为了应对复杂业务场景中的性能挑战,这个组件库的表格组件设计得非常轻量化,只解决了最常见的一些表格问题。开发者可以结合 useNDataTable 实现异步数据场景,并通过与库中的简约组件结合使用,满足大多数常见的表格渲染需求。直接在文档体验
7. useRequest
useRequest 是借(抄)鉴(的) ahooks 中的 useRequest 最新版本功能,不过它是 Vue 版本的实现,提供了一系列实用的请求处理功能:
自动请求/手动请求
:支持自动和手动触发 HTTP 请求。轮询
:支持定时轮询请求,用于需要定期刷新数据的场景。防抖
:防止频繁触发请求。节流
:限制请求频率,避免过多的请求占用资源。屏幕聚焦重新请求
:当用户重新聚焦页面时自动触发请求,保持数据最新。错误重试
:在请求失败时自动重试,提升用户体验。loading delay
:添加加载延迟,防止闪烁的加载状态。竞态取消
:防止竞态问题,确保请求的返回数据是用户期望的结果。
这些功能能够帮助开发者在处理复杂的异步数据场景时大大简化代码逻辑,提高请求处理的可靠性。
8. ProConfigProvider 组件
在实际业务开发的过程中,组件的默认 props 可能并不完全符合业务需求。如果每个组件都需要手动调整其 props 默认值,开发者会面临较大的维护压力。为了解决这个问题,我们开发了 ProConfigProvider
组件,提供了 prop-overrides
功能,可以全局定制组件库中所有组件的默认 props 值
。
例如,我们提供了 ProFormClearableProvider
组件,它基于 prop-overrides 实现,可以将所有表单项的默认配置改为可清空的
。这样开发者可以统一管理表单项的可清空状态,避免重复设置。
当然更多的功能可以直接在文档中体验。通过这些组件的封装和功能扩展,开发者能够轻松地管理复杂的表单数据、优化请求处理流程,并提高整体开发效率。
在线演练场
你可以在这里面在线试用所有的组件,在决定是否需要接入该组件库到你的项目中,为了更方便的使用,我们支持使用 unocss 编写
下一阶段计划
- 封装编辑表格(ProEditDataTable)组件,使其在更复杂的业务下使用最少的代码完成功能
- 封装布局(ProLayout)组件,支持多种布局模式