基于Vue,ElementUI开发的一款表单设计器
ztj100 2025-06-10 04:13 5 浏览 0 评论
介绍
基于Vue,ElementUI开发的一款表单设计器，提高表单开发效率的利器，让开发者从枯燥的表单代码编写中解放出来
工具地址：
http://tools.xiaoyaoji.cn/form
GitHub地址：
https://github.com/GavinZhuLei/vue-form-making
特性
- 可视化配置页面
- 提供栅格布局，并采用flex实现对齐
- 一键预览配置的效果
- 一键生成配置json数据
- 一键生成代码，立即可运行
- 提供自定义组件满足用户自定义需求
- 提供远端数据接口，方便用户需要异步获取数据加载
- 提供功能强大的高级组件
- 支持表单验证
- 快速获取表单数据
CDN
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>
安装
npm install form-making -S
效果截图
使用拖拽的方式可以就可以使用左边的组件设计表单页面
点击选中组件，右边可自定义配置组件，样式，验证等
设计完页面后，可点击预览图实时查看表单效果
设计完可生成完整的可运行的HTML文件，或是Vue组件，可放进Vue项目中引用