快速上手

温馨提示

vue-dynamic-form-component只能在Vue框架中使用,请提前安装好Vue依赖

安装

# yarn
yarn add vue-dynamic-form-component
# or npm
npm install vue-dynamic-form-component

注册

全局注册

import Vue from 'Vue'
import DynamicForm from 'vue-dynamic-form-component'

Vue.use(DynamicForm)

组件内注册

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

使用

简单类型

组件支持常见的输入类型:string, number, boolean, integer, float, enum, date, url, email 等等,更多类型请查阅 descriptor.type

点击显示/隐藏示例
<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'],
          options: [
            { label: 'option-1', value: 'value-1', disabled: true },
            { label: 'option-2', value: 'value-2' }
          ]
        }
      },
      data: {}
    }
  }
}
</script>

对象

type: 'object'fields 配合使用即可生成嵌套对象

点击显示/隐藏示例
<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>

HashMap

type: 'object'defaultField 配合使用即可生成 Hashmap

点击显示/隐藏示例
<template>
  <dynamic-form
    v-model="data"
    :descriptors="descriptors">
  </dynamic-form>
</template>

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

数组

type: 'array'defaultField 配合使用可以生成对应数组,当数组元素是可枚举类型时,推荐在 defaultField 中使用 enum 类型并设置 multiple: true,组件将会为这个数组生成一个多选下拉框。

点击显示/隐藏示例
<template>
  <dynamic-form
    v-model="data"
    :descriptors="descriptors">
  </dynamic-form>
</template>

<script>
export default {
  data () {
    return {
      descriptors: {
        array: {
          type: 'array',
          label: 'array label',
          defaultField: {
            type: 'object',
            fields: {
              boolean: { type: 'boolean', required: true },
              string: { type: 'string', required: true, pattern: /^test$/g },
              array: {
                type: 'array',
                defaultField: {
                  type: 'object',
                  fields: {
                    boolean: { type: 'boolean', required: true },
                    string: { type: 'string', required: true, pattern: /^test$/g }
                  }
                }
              }
            }
          }
        },
        multiSelect: {
          type: 'array',
          label: 'multi-select',
          required: true,
          defaultField: {
            type: 'enum',
            multiple: true,
            enum: [0, 1, 2, 3],
            options: [
              { label: 'option-0', value: 0, disabled: true },
              { label: 'option-1', value: 1 },
              { label: 'option-2', value: 2 },
              { label: 'option-3', value: 3 }
            ]
          }
        }
      },
      data: {}
    }
  }
}
</script>

自定义校验

一般情况下,在你声明了 type 后,你不需要对字段编写额外的校验代码,vue-dynamic-form-component 自带了默认的校验规则及校验信息。

如果你需要自定义校验规则或校验信息,可以采用以下方式

自定义校验信息

给对应规则添加 message 字段即可覆盖原校验信息,可以使用数组形式给一个属性添加多条规则

注意

特殊属性 label, fields, defaultField 等只能和 type 属性在同一规则中,具体查阅 descriptor.type

点击显示/隐藏示例
<template>
  <dynamic-form
    v-model="data"
    :descriptors="descriptors">
  </dynamic-form>
</template>

<script>
export default {
  data () {
    return {
      descriptors: {
        string: { type: 'string', label: 'username', required: true, message: 'Input the username please' },
        url: [
          { type: 'url', label: 'homepage', message: 'Homepage must be a url' },
          { required: true, message: 'Homepage is required' }
        ],
        test: { type: 'string', whitespace: true }
      },
      data: {}
    }
  }
}
</script>

自定义规则

vue-dynamic-form-component 提供了很多配置属性来满足大部分验证规则,以下为一些常用配置,更多配置请查阅 descriptor

属性 类型 说明
required Boolean 字段是否为必填
pattern RegExp 用于匹配字段值的正则表达式
len Number 验证字符串或数组的长度
validator Function(rule, value, callback) 自定义校验函数, callback(Error)表示校验失败, callback()校验通过
点击显示/隐藏示例
<template>
  <dynamic-form
    v-model="data"
    :descriptors="descriptors">
  </dynamic-form>
</template>

<script>
export default {
  data () {
    return {
      descriptors: {
        author: [
          { type: 'string', label: 'Author Name', required: true },
          {
            validator: (rule, value, callback) => {
              if (value.length <= 5) {
                callback(new Error('The author name\'s length must more than 5'))
              } else {
                callback()
              }
            }
          }
        ]
      },
      data: {}
    }
  }
}
</script>

表单操作

vue-dynamic-form-component 提供了几个常用的方法来操作表单,可以配合 operations 插槽使用。

温馨提示

为方便演示,文档中引入了 el-button 组件,如实际使用中需要,请自行引入。表单方法的具体参数请查阅 组件方法

点击显示/隐藏示例





 
 
 
 
 






































<template>
  <dynamic-form
    ref="dynamic-form"
    v-model="data"
    :descriptors="descriptors">
    <template slot="operations">
      <el-button @click="clearValidate">clearValidate</el-button>
      <el-button type="primary" @click="resetFields" plain>resetFields</el-button>
      <el-button type="primary" @click="validate">validate</el-button>
    </template>
  </dynamic-form>
</template>

<script>
export default {
  data () {
    return {
      descriptors: {
        prop1: {
          type: 'object',
          required: true,
          fields: {
            prop1: { type: 'string', required: true }
          }
        },
        prop2: {
          type: 'object',
          required: true,
          defaultField: { type: 'string', required: true }
        }
      },
      data: {}
    }
  },
  methods: {
    clearValidate () {
      this.$refs['dynamic-form'].clearValidate()
    },
    resetFields () {
      this.$refs['dynamic-form'].resetFields()
    },
    async validate () {
      const valid = await this.$refs['dynamic-form'].validate()
      window.alert(`valid result ====> ${valid}`)
    }
  }
}
</script>
Last Updated: 2019-7-5 11:59:33