# @lingxiteam/dform > 零成本上手的移动端动态表单库。 Latest version **4.6.1-alpha.2** (published 2025-11-14) · MIT license · 0 weekly downloads ## Install ```sh npm install @lingxiteam/dform pnpm add @lingxiteam/dform yarn add @lingxiteam/dform bun add @lingxiteam/dform ``` ## Health **Score 60/100 (C)** — status: stable. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 4.6.1-alpha.2 | | Published | 2025-11-14 | | First published | 2022-10-18 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 10 | | Unpacked size | 1.6 MB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 94 | | Maintainers | limanpm, wanerrr, mishi-brother, hammersjs, zhang.guoyong, zzzzjq, diyc, goulili, pengyh, wujian666, taiyangteng, cenxiaolian, xiaohuoni, duan_duan, yaozanwen, brinkr, babelczx | ## Links - npm: https://www.npmjs.com/package/@lingxiteam/dform - Repository: https://github.com/alitajs/DynamicForm - Homepage: https://github.com/alitajs/DynamicForm#readme - Issues: https://github.com/alitajs/DynamicForm/issues - npm.io page: https://npm.io/package/@lingxiteam/dform ## Dependencies (10) - [dayjs](https://npm.io/package/dayjs.md) ^1.10.6 - [heic2any](https://npm.io/package/heic2any.md) ^0.0.4 - [classnames](https://npm.io/package/classnames.md) ^2.3.1 - [lodash.chunk](https://npm.io/package/lodash.chunk.md) ^4.2.0 - [rmc-feedback](https://npm.io/package/rmc-feedback.md) ^2.0.0 - [rc-field-form](https://npm.io/package/rc-field-form.md) ^1.27.0 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) 7.23.2 - [rmc-date-picker](https://npm.io/package/rmc-date-picker.md) ^6.0.10 - [react-transition-group](https://npm.io/package/react-transition-group.md) 4.4.1 - [@lingxiteam/antd-mobile-v2-theme](https://npm.io/package/@lingxiteam/antd-mobile-v2-theme.md) 0.0.1 ## Recent versions - 4.6.1-alpha.2 (latest) — 2025-11-14 - 4.6.1-alpha.1 — 2025-11-11 - 4.3.1-alpha.6 — 2025-10-30 - 4.3.1-alpha.5 — 2025-10-14 - 3.5.1-alpha.62 — 2025-03-04 - 4.3.1-alpha.4 — 2025-03-03 - 3.5.1-alpha.61 — 2025-01-10 - 4.3.1-alpha.3 — 2025-01-02 - 4.1.1-alpha.6 — 2025-01-02 - 3.5.1-alpha.60 — 2025-01-02 - 3.5.1-alpha.59 — 2025-01-01 - 3.5.1-alpha.58 — 2025-01-01 - 3.5.1-alpha.57 — 2025-01-01 - 3.5.1-alpha.56 — 2024-12-26 - 3.5.1-alpha.55 — 2024-12-26 - … 221 more at https://npm.io/package/@lingxiteam/dform/versions ## README # @lingxiteam/dform 零成本上手的移动端动态表单库。 ## 介绍 [官网文档](https://dform.alitajs.com/) 借鉴了 `antd@4` 的 `Form` 组件，针对表单使用的 `react-component/field-form` 库进行二次封装。 ## 特性 - 🚀 UI 的快速实现。 - 🎉 实现一次性全部赋值。 - 🍁 表单提交取值。 - 💄 融合多类型组件表单。 - 🌈 支持动态表单。 - 🐠 公司内部数十个项目中得到锤炼，不断优化完善。 ## 组件 `dform` 共提供 `17` 种组件。涵盖： - 文本展示类型: `text` - 输入类型: `input` 和 `area` - 选择类型: `picker` 和 `select` - 多选类型: `multiplePicker` 和 `checkbox` - 开关类型: `switch` - 时间选择类型: `date` - 图片选择类型: `image` - 选择地址类型: `addressPicker` - Radio 按钮类型: `radio` 和 `coverRadio` - Check 多选类型: `check` - 时间区间选择类型: `rangeDatePicker` - 高阶输入类型: `extraInput` 如果这么多的组件还不能满足需求，不着急。我们还提供 `自定义类型: custom` 组件，让用户自己实现，并在文档中提供教程。或者给我们提个 [issues](https://github.com/alitajs/DynamicForm/issues)，我们会根据评估结果进行开发和维护。 ## 快速上手 ```bash npm install @lingxiteam/dform or yarn add @lingxiteam/dform ``` ## 提效点 ### 1、`picker` 组件： `antd-mobile-5` 提供的 `Select` 组件涵盖了及联的类型，所以 `value` 出参以 `[]` 的形式。 但是在表单对象走接口时，每个字段的值很大情况下都是 `stirng` 或者 `number` 的形式进行传递，在 `[]` 情况下，还要对数据结构进行处理。 `dform` 提供了四种选址组件: - `picker`: 单选类型，出参为 `string` 或者 `number`，不再需要对数据结构进行多一层的转化。 - `select`: `antd-mobile-5` 上的 `Select` 组件，出参入参设值保持一致。 - `multiplePicker`: 多选，出参以 list 的形式提供。 - `addressPicker`: 选址，更是帮你大大的提效(**舒服的写业务吧，剩下的事情交给我们**)。 ### 2、一行代码配置样式 不同的项目，不同的 ui 设计师，针对表单的开发样式肯定不一样，比如： - 标题的颜色和大小 - 值的颜色和大小 - placeholder 颜色 - ... 在 `.umirc.ts` 和 `config.ts` 下配置：`theme` ![theme](https://img-blog.csdnimg.cn/20200702171633257.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjI3ODk3OQ==,size_16,color_FFFFFF,t_70) 一行代码帮你解决整个项目 `dform` 样式问题。**不香吗？** ### 3、不敲一行代码帮你配置 `data` 的 JSON 数据 如果你连 `JSON` 格式的 `data` 也懒得写，那么 `isDev` 字段开启开发者模式，让你鼠标点一点就能编辑好一串 `JSON`，视频会告诉你用起来多舒服。 视频若打不开请直接点开[@lingxiteam/dform 可视化开发者模式](https://v.qq.com/x/page/u3108c1l2o8.html)链接。 ## 可视化编辑方案 方案灵感来源于 [ava](https://github.com/antvis/ava) 的 `autoChart`，用法和触发条件一致，都是 data 为空且在开发状态的时候，显示编辑表单按钮。用户可以强制设定 `isDev` 来在任意环境中使用。 ![2020-01-20 17 16 23](https://user-images.githubusercontent.com/11746742/72713840-b37bc900-3ba8-11ea-8a94-d19cdd39be53.gif) 更多详情，请点击[dform 官网](https://dform.alitajs.com/) 欢迎交流。感谢！ --- _Source: https://npm.io/package/@lingxiteam/dform · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._