老板一动脑、大师累断腰

时间回到两个月前，阳光明媚、空气香甜的一天上午，老板端着茶缸踱着方步走进了办公室，发现我正在重温一篇经典的前端博文《再也不想写表单了》。

“大兄弟，这文章我也看过，还别说，写得针不戳！”

“我这是第三遍看了，做前端真不容易，这种变来变去的表单看着头大。。。”

“需求变了，又要重新撸代码了吧，测试、发布、部署也得重新走一遍。”

“那可不是，加个按钮也得重新测试、发布，眼睛一睁一闭，一天过去了~~嚎”

“大兄弟，你说咱们能不能搞个表单新轮子，解救前端的xdjm们于水火？”

“搞是能搞，但表单的轮子真不少，没有10个也有8个了。”

“要搞就搞点有特色的，这叫差异化竞争！”

“比如说？”

“首先嘛，上手必须得简单，配置式的表单过时了，谁能记住那么多属性？所以必须是拖拽式的，上手就能用。”

“OK，get了”

“其次，就是要满足复杂的交互逻辑，没有交互的表单哪里有灵魂！？”

“好，这个也安排上！”

“当然了，表单的数据校验也要考虑全面，正则校验、自定义校验都要安排上！”

“满足，这个必须满足！”

“还要，CSS样式什么的也要内置，表单不好看，样式来凑！”

“CSS我不熟啊，这个我考虑考虑~~”

“考虑啥子考虑？别等了，今天就开动，两个月后我来验货！”

“。。。”

===================分割线、此处是黄金分割线===================

VForm初出茅庐

经过两个月的挖坑、填坑，大师光荣完成了撸一个新轮子的任务——VForm出炉了，VForm全称不是VueForm，而是VariantForm（看这名字肯定流行不起来）。

variant 英[ˈveəriənt] 美[ˈveriənt]
n. 变种; 变体; 变形;
adj. 变异的; 不同的，相异的，不一致的; 多样的; 易变的，不定的;

这里Variant引申为灵活、多变、无形，任你需求变变变，我以不变应万变。

废啥话呀，直接上干货：点此立即体验

先来个动图：

再来个动图感受下交互（鼠标点击可放大查看）：

感受下高级交互（鼠标点击可放大查看）：

===================分割线、此处是黄金分割线2===================

VForm的亮点功能

1. 所见即所得，拖拽式设计，0上手成本；

2. 支持丰富的容器组件和字段组件，多达20多种；

3. 支持多种数据校验方式，必填、内置校验函数、正则表达式、自定义校验；

4. 支持自定义CSS样式、自定义函数；

5. 支持丰富的交互事件和API方法；

6. 直接导出Vue组件源码或HTML源码，一分钟即可跟现有项目集成；

更多功能：https://www.yuque.com/variantdev/vform/gsitnl

VForm常见应用场景

VForm可应用于如下场景：

1. 工作流表单设计；

2. 业务管理后台表单编辑；

3. CRUD新建/编辑表单；

4. 数据采集（报名表、申请表、健康日报等等）；

5. 问卷调查；

6. 低代码开发平台；

最后的上硬菜环节

库文件仓库（不含源码）：https://github.com/vdpAdmin/VFormBuilds

gitee备份仓库：https://gitee.com/vdpadmin/VFormBuilds

使用文档：https://www.yuque.com/variantdev/vform

在线演示：http://120.92.142.115/

最最最重要的，一定要放最后，有源码吗？有！！！（在文档里有说明）

今天的介绍就到这里，下一期具体讲解VForm的编码实现过程和各种趟坑经验，且听下回分解。