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

vformAdmin

老板一动脑、大师累断腰

      时间回到两个月前,阳光明媚、空气香甜的一天上午,老板端着茶缸踱着方步走进了办公室,发现我正在重温一篇经典的前端博文《再也不想写表单了》
     “大兄弟,这文章我也看过,还别说,写得针不戳!”
     “我这是第三遍看了,做前端真不容易,这种变来变去的表单看着头大。。。”
     “需求变了,又要重新撸代码了吧,测试、发布、部署也得重新走一遍。”
     “那可不是,加个按钮也得重新测试、发布,眼睛一睁一闭,一天过去了~~嚎”
     “大兄弟,你说咱们能不能搞个表单新轮子,解救前端的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. 低代码开发平台;

最后的上硬菜环节

库文件仓库(不含源码):https://github.com/vdpAdmin/VFormBuilds
gitee备份仓库:https://gitee.com/vdpadmin/VFormBuilds

使用文档:https://www.yuque.com/variantdev/vform
在线演示:http://120.92.142.115/

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

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

阅读 396
7 声望
0 粉丝
0 条评论
你知道吗?

7 声望
0 粉丝
文章目录
宣传栏