龙空技术网

牛X Vue+element-ui 可视化表单设计生成器

web前端进阶 6943

前言:

现在朋友们对“h5 表单”大约比较关注,兄弟们都想要剖析一些“h5 表单”的相关文章。那么小编同时在网络上收集了一些有关“h5 表单””的相关文章,希望各位老铁们能喜欢,你们快快来学习一下吧!

今天给大家推荐一款超逼格的Vue可拖拽表单设计器组件FormGenerator。

form-generator 基于 Vue.js+ElementUI 高效表单设计组件,star高达1.7K+。

功能特点可视化设计表单一键生成原生的vue单页表单代码,保持100%拓展性在线编辑器修改生成的代码,并实时预览表单栅格化布局支持表单校验快速查阅组件的官方文档vscode插件

在上文的设计器的基础上,封装了一个vscode插件。突破网页不能写入文件的限制。

请在vscode中搜索 jakHuang 或 Form Generator Plugin

安装使用

# 下载项目git clone  进入目录cd form-generator# 安装依赖npm install# 本地开发npm run dev# 构建npm run build

支持生成的代码直接运行在基于Element的vue项目中。也可导出JSON表单,使用配套的解析器将JSON解析成真实的表单。

# 预览地址 仓库地址

ok,就分享到这里。希望对大家有所帮助,欢迎一起交流讨论!

标签: #h5 表单 #web可视化表单设计器 #js表单生成器动手实践 #elementui查询获取表单数据 #vue 表单编辑器