我给大家肝了一个1天搭100个表单的设计器~~

15,965 阅读3分钟

老板一动脑、大师累断腰

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

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

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

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

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

     “大兄弟,你说咱们能不能搞个表单新轮子,解救前端的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源码,一分钟即可跟现有项目集成;

更多功能:www.yuque.com/variantdev/…

VForm常见应用场景

VForm可应用于如下场景:

1. 工作流表单设计;

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

3. CRUD新建/编辑表单;

4. 数据采集(报名表、申请表、健康日报等等);

5. 问卷调查;

6. 低代码开发平台;

最后的上硬菜环节

库文件仓库(不含源码):github.com/vdpAdmin/VF…

gitee备份仓库:gitee.com/vdpadmin/VF…

使用文档www.yuque.com/variantdev/…

在线演示http://120.92.142.115/

最最最重要的,一定要放最后,有源码吗?有!!!(在文档里有说明)

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