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

今天给大家推荐一款超逼格的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

发表评论

登录后才能评论