老板一动脑、大师累断腰
时间回到两个月前,阳光明媚、空气香甜的一天上午,老板端着茶缸踱着方步走进了办公室,发现我正在重温一篇经典的前端博文《再也不想写表单了》。
“大兄弟,这文章我也看过,还别说,写得针不戳!”
“我这是第三遍看了,做前端真不容易,这种变来变去的表单看着头大。。。”
“需求变了,又要重新撸代码了吧,测试、发布、部署也得重新走一遍。”
“那可不是,加个按钮也得重新测试、发布,眼睛一睁一闭,一天过去了~~嚎”
“大兄弟,你说咱们能不能搞个表单新轮子,解救前端的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/…
最最最重要的,一定要放最后,有源码吗?有!!!(在文档里有说明)
今天的介绍就到这里,下一期具体讲解VForm的编码实现过程和各种趟坑经验,且听下回分解。