支持嵌套对象、多级数组的Vue动态多级表单组件 —— vue-dynamic-form-component

2019-06-24 admin

方便不想看完全篇文章的童鞋,简单总结一下,这是篇软广,主要是推广自己在业务中沉淀的一个开源组件 vue-dynamic-form-component 。基于 element-ui 实现的 vue组件,只需编写类似 async-validator 的规则,自动生成对应的表单,支持常见输入类型的同时,支持嵌套对象、hashmap、多维数组等复杂类型。有需要的童鞋欢迎使用和贡献代码,顺便给个star(我也不知道为什么字体自动加黑了,不关我事)

前言

几个月前,我在github开源了一个前端解析手机应用安装包(IPAAPK 文件)信息的工具 app-info-parser ,算是第一次正儿八经的做开源这件事,之后就有了半夜三四点回复issue、修bug的体验,说实话,上完班还要处理issue是挺累的,但也是乐在其中。正所谓开源一时爽,一直开源一直爽。

对于程序员而言,最不喜欢的事情,除了和产品经理 吵架 (交流,是交流,不是吵架,要peace)外,估计就是一直做重复的事情了。在程序界,有相当一部分开源工具都是为了把人从重复的事情中解放出来,去做更有趣、更能体现个人价值的事情。比如 AI智能回复老婆消息 (请勿随意尝试,老婆没了我不负责)。

之前开源的工具 app-info-parser 是减少重复工作,提高生产效率,接下来的主角 vue-dynamic-form-component 也是如此。

先贴一个展示大概功能的 gif ,动图有点大,如果加载不出来的话可以到 组件首页 查看。

左边是你需要编写的主要代码,右边是对应生成的表单。

vue-dynamic-form-component.gif

背景(Why)

为什么要做这个组件?其实在前言中已经提到:因为_不想一直做重复、没有技术含量的事情_。

对于本篇文章而言,这件重复、没有技术含量的事情就是:简单的表单代码

我所在的小组主要负责公司的公共服务系统搭建及维护,随之而来的便是一套接一套的CURD系统,目前业界已经存在很多优秀的UI库,比如为 Vue 而生的 element-ui, iView,基于 reactant-design 等,已经在很大程度上提高了PC管理系统的开发效率,减少了很多重复工作。

但是对于表单功能,UI库出于通用性的考虑,实际使用中,对于简单的数据对象,我们仍然需要编写大量的表单代码来实现,因为出现了很多优秀的动态表单组件,比如 vue-form-generatorvue-form-making

那么为什么我还要再造一个类似的轮子?这其实要结合组内的技术栈来说:

由于组内的人员配置问题:前端1人(没错,就是孤独的我)、后端8人+,在技术栈上,选用了后端同事相对容易上手的 Vue ,基于 element-ui 开发管理系统。而目前已有的动态表单组件存在以下不适用的问题:

  • vue-form-generator:设计思想很好,但是组件样式比较old school,同时对多级对象、多维数组等复杂数据支持不是很好,需要自己实现 field 组件,使用成本较高
  • vue-form-making:也是基于element-ui, 样式统一,但是基于组件类型生成表单的方式不够灵活,只能利用已存在的输入组件,因此不支持多级对象等复杂类型

其他的组件相对而言存在更多的问题,就不一一列举了。

以上就是为什么我会想要再造一个Vue的动态表单轮子,其实里面就已经包含了接下来我们要讲的: vue-dynamic-form-component 有什么作用?

功能(What)

动态生成表单

基于 async-validator 的规则来生成表单,只需要编写简单的声明配置,即可自动生成表单,只需要关注数据类型,无需关注数据类型对应何种输入组件

<template>
  <dynamic-form
    v-model="data"
    :descriptors="descriptors">
  </dynamic-form>
</template>
export default {
  data () {
    return {
      data: {},
      descriptors: {
           date: { type: 'date', label: 'date \'s label', required: false },
        number: { type: 'number', label: 'number \'s label', required: true, placeholder: 'please input the number' },
        string: { type: 'string', label: 'string \'s label', required: true, pattern: /^test$/g },
        url: { type: 'url', label: 'url \'s label', required: true, placeholder: 'please input the url' },
        email: { type: 'email', label: 'email \'s label', required: false },
        enum: { type: 'enum', label: 'enum\'s label', enum: ['value-1', 'value-2'] }   
      } 
    }
  }
}

demo

如果是直接使用 element-ui,除了长得多的html代码,还需要编写对应的 rule 以供表单验证,对应的代码量要多得多。

支持嵌套对象/Hashmap/多维数组

使用 element-ui 编写表单时,为了支持嵌套对象等复杂类型,我们可以在 el-form-item 中再添加一个 el-form 或者 el-form-item

但是,如果有更好的选择,你真的愿意一遍一遍的写这样的代码吗?

<!-- 省略data,rules等代码 -->
<el-form label-width="120px" :model="data" :rules="rules">
  <el-form-item prop="user" label="用户">
    <el-form :model="data.user">
      <el-form-item label="名字" prop="name">
        <el-input v-model="data.user.name" placeholder="只允许英文、数字"></el-input>
      </el-form-item>
    </el-form>
  </el-form-item>
</el-form>

要注意,以上仅仅只是一个输入框(已省略data代码,为了美观还需要额外的样式代码),就需要写这么多代码,能忍?谁爱忍谁忍,我不忍了。看看如果是使用 vue-dynamic-form-component, 我们需要做什么

// 只展示 descriptors 代码,其他无需变更
{
  user: {
    type: 'object',
    fields: {
      name: { type: 'string', label: '名字', placeholder: '只允许英文、数字' }
    }
  }
}

并且, vue-dynamic-form-component 还对多级表单做了样式优化,自动加深子表单的背景色(初始背景色、颜色偏移量可配置),方便区分:

demo

同时,针对 hashmap / array 等复杂数据类型实现了对应的交互逻辑,提供添加、删除等操作:

demo

看完这个你确定你还想再回去写前面的代码?(等我不干程序员了我就去当推销员-。-)

使用(How)

假如你心动了,那么,心动不如行动(自我嘲讽:好老土的说法),赶紧用起来,把自己从繁琐无聊的表单代码中解放出来。

具体用法请查阅组件文档:https://vue-dynamic-form.quin…

别忘了先去 github 点个star哦你以为这里就不加粗了吗,不存在的兄dei

最后

不要拘泥于业务开发,善于(或者说要热衷于)寻找业务/生活中存在的待解决问题,然后干掉它,这才是真正体现你价值的地方。

共勉~

[转载]原文链接:https://segmentfault.com/a/1190000019569852

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-68092.html

文章标题:支持嵌套对象、多级数组的Vue动态多级表单组件 —— vue-dynamic-form-component

相关文章
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
回到顶部