投稿

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

Vedu • • 程序开发 • 阅读 9940

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

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

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

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

功能特点

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

vscode插件

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

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

请在vscode中搜索 jakHuang 或 Form Generator Plugin

安装使用

# 下载项目
git clone https://github.com/JakHuang/form-generator.git
# 进入目录
cd form-generator
# 安装依赖
npm install
# 本地开发
npm run dev
# 构建
npm run build
牛X Vue element-ui 可视化表单设计生成器

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

牛X Vue element-ui 可视化表单设计生成器
牛X Vue element-ui 可视化表单设计生成器
牛X Vue element-ui 可视化表单设计生成器
牛X Vue element-ui 可视化表单设计生成器
# 预览地址
https://mrhj.gitee.io/form-generator/
# 仓库地址
https://github.com/JakHuang/form-generator

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

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/procedure/11062.html

赞 (1)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2020-09-07 15:54
下一篇 2020-09-09 08:37

相关推荐

发表评论

登录后才能评论