VFrom 动态表单组件详细使用说明 - D-xuanmo/v-form GitHub Wiki

简介

VFrom 主要是基于 Vue2.x + Vant-UI 2.x 实现的动态表单组件，通过 JSON 配置生成

组件特色

目前已经集成的组件（Address/Checkbox/DatePicker/Input/Radio/Select/Text/Switch/Upload），组件不满足的情况可自定义开发组件注入或者使用 slot 的形式进行实现
校验规则已经集成 VeeValidate 插件，也可以自定义扩展校验规则，参考资料 https://logaretm.github.io/vee-validate
在线演示，可编辑 >>
在线演示，不可编辑，移动端 >>

语法约定

Mixin 公用方法使用 __ 作为前缀
事件传递使用 e__ 作为前缀
@ 为组件校验规则保留关键字

使用组件

安装组件

# 推荐使用 yarn 安装，使用 npm 可能会存在依赖不全的情况
$ yarn add @xuanmo/v-form

项目中引入组件并启用

import VForm from '@xuanmo/v-form'
import '@xuanmo/v-form/packages/style/index.less'

// 不经过编译引入方式（不推荐）
// import VForm from '@xuanmo/v-form/dist/v-form.umd.min.js'
// import '@xuanmo/v-form/dist/index.css'

// 覆盖变量引入此文件替换变量即可，可参考文件：https://github.com/D-xuanmo/v-form/blob/master/example/assets/style/var.less
// import '@xuanmo/v-form/packages/style/var.less'

// 注册组件
/**
 * 设置地址选择组件数据 JSON，组件默认不注册数据
 * 如果需要自定义数据，参考此文件结构即可
 */
import ADDRESS_JSON from '@xuanmo/v-form/packages/Address/data.json'
Vue.use(VForm, {
  addressJSON: ADDRESS_JSON
})

// 设置防抖时间，默认200ms
Vue.use(VForm, {
  debounceTime: 200
})

修改打包配置

注：如果组件引入采取非编译之后的包，需要执行这一步，很重要！！！

// vue.config.js
module.exports = {
  transpileDependencies: [
    '@xuanmo/v-form'
  ]
}

使用组件 >>

组件配置数据格式

主要字段说明

key：组件内的每个子组件标识，一般用于后端数据字段
value：组件渲染时的默认数据
rules：子组件的所有规则字段

组件默认的数据格式

[
  {
    "key": "text1",
    "value": "",
    "rules": {
      "label": "文字1",
      "type": "VInput",
      "vRules": "required|custom:@text2,@text3",
      "placeholder": "请输入文字",
      "errMsg": "请输入文字"
    }
  }
]

扁平数据结构

[
  {
    "key": "text1",
    "value": "",
    "label": "文字1",
    "type": "VInput",
    "vRules": "required|custom:@text2,@text3",
    "placeholder": "请输入文字",
    "errMsg": "请输入文字"
  }
]

自定义校验规则

自定义校验规则分为全局规则、局部规则两种模式

全局规则：整个组件全局共享
局部规则：只针对当前组件使用生效

全局规则

Vue.use(VForm, {
  validator: {
    custom: {
      // 此处定义的值可以在 `validate` 函数的第二个参数接收
      params: ['length'],
      message: '长度不能大于{length}',
      validate: (value, { length }) => {
        return value.length <= length
      }
    },

    // 关联校验，可将多个表单项的值做比对
    target: {
      params: ['target1', 'target2'],
      message: '关联校验失败',
      // validate 第三个参数为正在执行校验相关联的组件实例
      validate: (value, { target1, target2 }, ctx) => {
        return value === target1 && value === target2
      }
    }
  }
})

局部规则

<v-form :validator="validator" />

export default {
  data() {
    return {
      validator: {
        custom: {
          params: ['target1', 'target2'],
          message: '关联文字校验未通过',
          validate: (value, { target1, target2 }, ctx) => {
            console.log('关联校验context：', value, target1, target2, ctx)
            return value === target1 && value === target2
          }
        }
      }
    }
  }
}

自定义规则参考资料

VeeValidate 规则扩展

可用组件

所有的组件的属性都继承自 Vant-UI 属性，不包含上传文件组件

组件名	描述
VAddress	地址选择器
VCheckbox	复选框
VRadio	单选框
VInput	输入框
VNumberKeyboard	数字输入框
VVerificationCode	短信验证码
VDatePicker	时间选择器
VDatePickerRange	时间区间选择器
VSelect	下拉选择框
VSwitch	开关按钮
VText	纯文字展示
VUpload	文件上传