Vue动态表单 —— vue-dynamic-form2

栏目: 编程语言 · 发布时间: 4年前

内容简介:前不久,我在github上开源了一个业务工作中沉淀出来的工具俗话说得好,开源一时爽,一直开源一直爽,所以我又来了 -。-我所在的小组主要负责公司的公共服务搭建,组内有不下十个公共服务项目(就我一个前端,太过分了T_T),每个项目都有配套的

背景

前不久,我在github上开源了一个业务工作中沉淀出来的工具 app-info-parser ,然后就有了半夜三四点回复issue邮件、修bug的爽歪歪体验,虽然上完班还要处理issue挺累的,但是也算乐在其中。

俗话说得好,开源一时爽,一直开源一直爽,所以我又来了 -。-

我所在的小组主要负责公司的公共服务搭建,组内有不下十个公共服务项目(就我一个前端,太过分了T_T),每个项目都有配套的 CURD 类的管理系统,随之而来的就是数不清的表单。

不夸张的说,我写表单都快写吐了。作为一个程序员,实在无法容忍自己把时间花在重复的事情上,所以抽时间在 element-uiasync-validator 的基础上写了一个动态表单组件 vue-dynamic-form

安利正式开始

安装

NPM包引入,vue-dynamic-form名字被占用了(哭瞎),因此在 NPM 中使用的名字是 vue-dynamic-form2

yarn add vue-dynamic-form2
# npm
npm install vue-dynamic-form2

script 标签引入请自行在 github仓库 中下载对应版本的源码,引入 lib/vue-dynamic-form.umd.min.js

注册

全局注册

import Vue from 'Vue'
import DynamicForm from 'vue-dynamic-form2'

Vue.use(DynamicForm)

组件内注册

<script>
import DynamicForm from 'vue-dynamic-form2'
export default {
  components: {
    DynamicForm
  }
}
</script>

简单示例

<template>
  <dynamic-form
    v-model="data"
    :descriptors="descriptors">
  </dynamic-form>
</template>

<script>
export default {
  data () {
    return {
      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'] }
      },
      data: {}
    }
  }
}
</script>

生成的表单

Vue动态表单 —— vue-dynamic-form2

复杂表单

vue-dynamic-form还支持生成嵌套对象的表单, 同时自动加深子表单背景方便区分

<template>
  <dynamic-form
    v-model="data"
    :descriptors="descriptors">
  </dynamic-form>
</template>

<script>
export default {
  data () {
    return {
      descriptors: {
        object: {
          type: 'object',
          label: 'Normal Object',
          fields: {
            object: {
              type: 'object',
              label: 'Child Object',
              fields: {
                boolean: { type: 'boolean', required: true },
                number: { type: 'number', required: true },
                string: { type: 'string', required: true, pattern: /^test$/g }
              }
            },
            boolean: { type: 'boolean', required: true },
            number: { type: 'number', required: true },
            string: { type: 'string', required: true, pattern: /^test$/g }
          }
        }
      },
      data: {}
    }
  }
}
</script>

生成的表单

Vue动态表单 —— vue-dynamic-form2

除了嵌套对象,嵌套表单、hashmap对象也可以很好的支持,更多的使用可以查阅具体文档 vue-dynamic-form docs


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

R Cookbook

R Cookbook

Paul Teetor / O'Reilly Media / 2011-3-22 / USD 39.99

With more than 200 practical recipes, this book helps you perform data analysis with R quickly and efficiently. The R language provides everything you need to do statistical work, but its structure ca......一起来看看 《R Cookbook》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

MD5 加密
MD5 加密

MD5 加密工具

html转js在线工具
html转js在线工具

html转js在线工具