UI目前广泛应用于中后端项目,是非常流行的Vue组件框架。 表单元素作为最常用的用户输入组件,在设计和开发过程中几乎都会涉及到,而且它们往往是相似的。 能减少重复编码工作吗? 是否可以通过点击几下鼠标来生成所需的表单,甚至无需编写代码? Form-,这个基于UI框架Form元素的表单设计和代码生成器,可以解放你的双手。

代码html个人网页完整代码_html代码_代码html怎么调字体大小

框架

介绍

Form-是盒马云上开源的表单设计和代码生成器。 项目代码位于,国内镜像位于。

Form——基于UI组件库的Form表单组件,开发了表单设计器。 在设计器中,你可以点击不同的输入组件来构建表单,设计器会自动生成相应的Vue代码,可以在项目中使用。 您还可以将设计好的表单导出为JSON格式,方便存储和传输。 使用时,使用配套的解析器将JSON解析成设计的形式即可使用。

html代码_代码html怎么调字体大小_代码html个人网页完整代码

形式使用

安装

Form- 需要 Node.js 10+,可以使用 NPM 安装:

npm i fms-form-generator

您也可以下载项目代码并自行构建:

git clone https://github.com/JakHuang/form-generator.git

然后安装依赖并使用YARN

yarn

或者npm安装依赖

npm install

要在本地运行表单设计器,请运行

npm run dev

您也可以在构建后部署

npm run build

Form-项目配备了JSON解析器,可以将JSON转换为真正的表单代码。 可以使用 NPM 安装:

npm i form-gen-parser

此外,form-还有一个配套插件Form,开发者可以安装该插件来帮助完成基本的表单代码构建任务。

代码html怎么调字体大小_html代码_代码html个人网页完整代码

FMS 表单库

例子

Form-的主界面是表单设计器:

代码html怎么调字体大小_代码html个人网页完整代码_html代码

表单设计师

可以看到,界面左侧放置了不同的输入组件,包括单行文本、计数器、下拉选择、日期范围、按钮等,基本满足了一般项目对表单的所有需求。

html代码_代码html怎么调字体大小_代码html个人网页完整代码

表单设计器组件选择

界面中间是设计好的表格。 单击左侧的组件将它们添加到表单中。 同时,表单还提供了元件的复制和删除功能,可以自由编辑。

界面右侧是组件属性和表单属性。 您可以修改当前所选组件的各种属性,例如字段名称、标题、标签宽度、默认值、大小等,以定制所需的组件; 您还可以修改表格。 修改属性,包括表单模型、验证模型、标签对齐方式等,实现表单级配置。

html代码_代码html个人网页完整代码_代码html怎么调字体大小

组件属性编辑

表单设计完成后,您可以点击界面上方的运行按钮。 这里我们可以选择生成类型,包括页面和弹窗。 弹出窗口类型会将表单嵌入到对话框组件中。

代码html怎么调字体大小_代码html个人网页完整代码_html代码

生成类型

完成类型选择后,我们可以得到生成的Vue代码,包括Vue模板、JS和CSS代码:

代码html个人网页完整代码_代码html怎么调字体大小_html代码

Vue模板代码

html代码_代码html个人网页完整代码_代码html怎么调字体大小

JS代码

可以看到,生成的代码可读性高、质量好,可以直接引入到项目中使用。 代码生成器还提供了漂亮的编辑器界面,可以直接编辑生成的代码,并在右侧重新渲染修改后的表单。

form-除了直接生成代码之外,还提供了将表单导出为JSON格式的功能,方便存储和传输。 Form- 设计了一种具有特定格式的 JSON 格式,用于 UI 表单的表示。 JSON文件可以直接在代码生成器中导出,然后与配套的form-gen-一起使用来解析并重新生成表单代码。

代码html个人网页完整代码_代码html怎么调字体大小_html代码

表单的 JSON 表示形式 –

表单的 JSON 表示形式将每个表单项存储在列表中。 每个表单项一般包括:

使用此 JSON 文件,您可以恢复表单并获取生成的 Vue 代码。 我们还可以以此为模板,添加变量,只需修改 JSON 数据即可自动生成批量相似的表单。

代码html个人网页完整代码_html代码_代码html怎么调字体大小

表单的 JSON 表示形式

总结

Form-作为UI表单设计和代码生成器,它简化了表单设计和代码编写工作,使表单设计工作“所见即所得”。 可以用在一些前端设计定制要求不高的场景。 使用起来非常方便。 不仅可以让设计者获得想要的表单设计,也让代码开发者从前端设计的额外工作中解放出来,一石二鸟。

Form-的实现需要非常熟悉Vue,尤其是表单的JSON表示的生成和解析。 同时该项目本身也是一个优秀的前端应用,有兴趣的开发者可以阅读代码。 学习开源并为开源做出贡献。

好了,今天的主题就讲到这里吧,不管如何,能帮到你我就很开心了,如果您觉得这篇文章写得不错,欢迎点赞和分享给身边的朋友。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注