在日常开发中，构建表单是一项非常常见且繁琐的任务。每次都需要从头开始编写代码，不仅费时费力，还容易出错。而低代码开发理念的出现，极大地简化了这一过程。
通过可视化设计和自动生成代码，我们可以更快速地完成开发任务，从而有更多的时间去做其他事情——比如摸鱼 😎。Variant Form 就是这样一个让人爱不释手的低代码表单生成器。
项目特点
1. 可视化设计
Variant Form 支持拖拽式的可视化设计界面，用户可以通过简单的拖拽操作来构建表单，大大降低了开发的复杂度。
2. 一键生成源码
设计完成后，只需一键即可生成完整的表单源码，无需手动编写代码，极大地提升了开发效率。
3. 高度自定义
支持各种自定义配置，满足不同场景下的表单需求。无论是简单的输入框还是复杂的多级表单，都能轻松实现。
4. 基于 Vue 2 开发
Variant Form 基于 Vue 2 开发，使用了现代化的前端技术栈，界面美观且响应速度快，易于维护和扩展。
5. 开源免费
该项目完全开源，代码托管在 Gitee 上，任何人都可以免费使用和修改，非常适合有个性化需求的企业和开发者。
安装使用
接下来，我将详细介绍如何在本地环境中搭建和使用 Variant Form。
1. 克隆项目代码
首先，确保你的系统中已经安装了 Git。然后，通过以下命令克隆项目代码：
git clone https://gitee.com/vdpadmin/variant-form.git
2. 安装依赖
进入项目目录并安装依赖：
cd variant-form npm install
或者使用 Yarn：
cd variant-form yarn install
3. 启动开发服务器
配置完成后，启动开发服务器：
npm run serve
或者使用 Yarn：
yarn serve
启动后，打开浏览器访问 http://localhost:8080，你将看到 Variant Form 的主界面。
4. 使用系统
进入主界面后，你可以开始使用 Variant Form 进行表单设计。以下是一些主要功能的介绍和使用方法：
拖拽式表单设计
在设计区域，你可以通过拖拽组件来创建表单。左侧是组件库，包含了各种表单组件，如输入框、下拉框、单选框、多选框等。你只需将需要的组件拖拽到设计区域即可。
表单属性配置
选中表单组件后，右侧会显示该组件的属性配置界面。你可以在这里修改组件的各种属性，如标签、占位符、默认值、校验规则等。
一键生成源码
设计完成后，只需点击“生成源码”按钮，即可生成完整的表单源码。生成的源码包含了表单的 HTML 结构和 Vue 组件代码，你可以直接将其复制到你的项目中使用。
5. 自定义表单组件
Variant Form 提供了丰富的自定义选项，你可以根据实际需求自定义表单组件。以下是一个自定义组件的示例：
<template> <div> <label :for="id">{{ label }}</label> <input :id="id" :type="type" v-model="value" :placeholder="placeholder" /> </div> </template> <script> export default { props: { id: String, label: String, type: { type: String, default: 'text' }, value: String, placeholder: String } } </script>
在这个示例中，我们创建了一个简单的自定义输入框组件，并通过 props 接收父组件传递的参数。
功能一览
- • 拖拽式可视化表单设计；
- • 支持PC、Pad、H5三种布局；
- • 支持运行时动态加载表单；
- • 支持表单复杂交互控制；
- • 支持自定义CSS样式；
- • 支持自定义校验逻辑；
- • 支持国际化多语言；
- • 兼容IE 11浏览器；
- • 可导出Vue组件、HTML源码；
- • 可导出Vue的SFC单文件组件；
- • 支持开发自定义组件；
- • 支持响应式自适应布局；
- • 支持VS Code插件；
- • 更多功能等你探究...；
总结
如果你想提高开发效率，享受更多的摸鱼时间，强烈推荐你试试 Variant Form！相信它会为你的开发工作带来极大的提升和帮助。
