v-schema-form
TypeScript icon, indicating that this package has built-in type declarations

3.1.9 • Public • Published

VSchemaForm 是什么

背景

表单问题,不管是在 jQuery 时代,还是 Vue/React 时代, 都永远是前端工程师们的痛,但是这又是没办法的事情,业务需求多种多样, 对于中后台业务而言,表单页面和报表页面基本上是中后台业务的核心展现形式, 但是,如何帮助开发者更高效的开发表单,目前传统的表单开发方式:

  • 手动管理表单状态
  • 手动收集表单数据
  • 手动管理表单校验状态

存在哪些问题?

  • 表单状态管理变得越来越难以维护,需要引入状态管理库
  • 传统表单开发的数据结构往往都是扁平结构,没法很好的处理嵌套复杂数据的情况, 如果要处理,工作量会非常大
  • 当业务有动态输出表单的需求的时候,不得不自己开发一个基于某种数据协议的动态输出表单的组件
  • 当业务需要在可视化界面配置产出表单时,需要自己开发一个基于json的动态输出表单组件

方案

基于以上问题的探索,以及受到UForm的启发,研发了VSchemaForm的Vue表单解决方案:

  1. 使用json描述表单内容
  2. 支持多平台(移动端和桌面端)
  3. 支持多个组件库(Element UI、Ant Design Vue、Antd Mobile Vue)
  4. 支持嵌套表单
  5. 支持任意数据的数组解构
  6. 支持复杂布局
  7. 支持副作用函数,统一处理表单内各项的数据联动
  8. 支持解构数据,减少自定义的数据转换
  9. 支持表单校验
  10. 支持扩展自定义的组件的作为输入组件,详情组件,布局组件等

Readme

Keywords

none

Package Sidebar

Install

npm i v-schema-form

Weekly Downloads

149

Version

3.1.9

License

none

Unpacked Size

347 kB

Total Files

136

Last publish

Collaborators

  • wuhao000