# 安装依赖$ npm run bootstarp# 启动项目$ npm run dev

# 推荐使用 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'// 覆盖变量引入此文件替换变量即可，可参考 example/App.vue// import '@xuanmo/v-form/packages/style/var.less'// 注册组件// 更多参数说明：https://github.com/D-xuanmo/v-form/blob/master/src/index.js#L6-L14/** * 设置地址选择组件数据 JSON，组件默认不注册数据 * 如果需要自定义数据，参考此文件结构即可 */import ADDRESS_JSON from '@xuanmo/v-form/packages/Address/data.json'Vue.use(VForm, {  addressJSON: ADDRESS_JSON})// 设置防抖时间，默认200msVue.use(VForm, {  debounceTime: 200})

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

Vue.use(VForm, {  primaryData: true})// 默认的数据模型const model1 = [  {    key: 'text1',    value: '',    rules: {      label: '文字1',      type: 'VInput',      vRules: 'required|custom:@text2,@text3',      placeholder: '请输入文字',      errMsg: '请输入文字'    }  }]// primaryData 为 true 时的数据模型const model2 = [  {    key: 'text1',    value: '',    label: '文字1',    type: 'VInput',    vRules: 'required|custom:@text2,@text3',    placeholder: '请输入文字',    errMsg: '请输入文字'  }]

/** * 自定义校验规则示例，规则遵循VeeValidate规则扩展 * 更多资料查看：https://logaretm.github.io/vee-validate/guide/basics.html#validation-provider */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 v-model="value" :model="model"></v-form>

// 导入公用组件的 Mixinimport { vFormItemBaseMixin } from '@xuanmo/v-form'export default {  name: 'FormItemTest',  // 使用 Mixin  mixins: [vFormItemBaseMixin],  methods: {    input(value) {      // 此方法必须调用，否则组件将不能接收数据      // 每次数据发生改变需要使用 e__input 方法对组件的数据进行上报      this.e__input(value)      // 如果需要发送自定义事件，可使用下边方法      this.__eventHandler('input', value)    }  }}

import Vue from 'vue'import FormItemTest from 'path'Vue.component(FormItemTest.name, FormItemTest)

const model = [  {    key: 'test',    value: '',    rules: {      label: '自定义组件',      // 传入组件名即可      type: 'FormItemTest',      placeholder: '点击输入',      vRules: 'required',      pattern: /^\d+$/,      errorMsg: '自定义组件错误信息'    }  }]

<!-- 示例如下 --><v-form :model="model">  <template v-slot:text="{ data }">    <van-field v-model="data.value"></van-field>  </template>  <!-- 行label自定义slot，格式{key}-label -->  <template #text-label>    自定义label  </template>  <!-- 行扩展字段slot，格式{key}-extra -->  <template #text-extra>    extra  </template></v-form>

const model = [  // 以下三个文字输入示例为关联校验  // 关联校验采取{rule}:@{field},@{field}格式  // 接收字段采取@{rule}格式  {    key: 'text1',    value: '',    rules: {      label: '文字1',      type: 'VInput',      vRules: 'required|custom:@text2,@text3',      placeholder: '请输入文字',      errMsg: '请输入文字'    }  },  {    key: 'text2',    value: '',    rules: {      label: '文字2',      type: 'VInput',      vRules: 'required|@custom',      placeholder: '请输入文字',      errMsg: '请输入文字'    }  },  {    key: 'text3',    value: '',    rules: {      label: '文字3',      type: 'VInput',      vRules: 'required|@custom',      placeholder: '请输入文字',      errMsg: '请输入文字'    }  },  // 时间选择器  {    key: 'date',    value: Date.now(),    rules: {      label: '时间',      // 共4种类型：datetime、year-month、date、time      type: 'VDatePicker|datetime',      // 数据格式处理：timestamp时间戳，其他用法参考：https://github.com/D-xuanmo/datejs      valueFormat: 'yyyy-MM-dd'    }  },  // 图片上传  {    key: 'file',    // 用于显示列表    value: [{ path: 'https://upyun.xuanmo.xin/test/20200418225229.png' }],    rules: {      label: '文件上传',      type: 'VUpload',      action: 'xxx',      accept: 'image/png',      multiple: true,      name: 'file',      headers: {},      // 上传附加的数据      data: {        dir: 'test'      },      // 自定义配置项，用于指定url字段为某个属性值      props: {        url: 'path'      }    }  }]

{  "value": {},  "errorMsg": [],  "isValid": false}