jsonForm

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Run your unit tests

npm run test:unit

表单组件

具体示例 demo

安装与使用方式

npm install json-config-form --save

import jsonConfigForm from 'json-config-form'

如需全局引用则全局注册，如单个引用则单个components注册

组件传参：

字段|类型|是否必填|注释 ---|:--:|---:|---: ref|--|--|用于获取dom，进行validate验证 formSchema|Object|是|用于渲染form的参数

例如：

    <json-config-form ref="myDemoForm" :formSchema="formSchema"></json-config-form>

formSchema内部参数列表：

字段|类型|是否必填|注释 ---|:--:|---:|---: labelWidth|数字|--|label的宽度 properties|Object|是|用于渲染form列表的参数，后台参数字段为键值，配置为值，如name:{ ... }

properties的值通用参数列表：

字段|类型|是否必填|注释 ---|:--:|---:|---: type|string|是|表单类型，input，textarea，number，select，cascader，datepicker，timepicker，radio，check，switch，slot（插槽类型） inputType|string|--|input类型，默认为text，常用还有password，email，url dateType|string|--|date，time类型，daterange等 value|--|是|对应的数据，与后台对接的数据 defaultValue|--|--|初始数据 disabled|boolean|--|是否禁用 ui|object|是|ui类配置，不同类型具体配置详见代码示例 rules|object|--|表单校验规则 changeEv|function|--|组件内部值变化的回调函数，number，select，datepicker，timepicker，switch类型有回调

rules列表

字段|类型|是否必填|注释| ---|:--:|---:|---:| required|boolean|--|是否必填| type|string|--|字段类型| min|number|--|最小值，数字为值，其他类型为长度| max|number|--|最大值，数字为值，其他类型为长度| otherRules|数组|--|其他规则，参照async-validator|

select，radio,check中的list列表内必有id，name字段，id用于key，name用于label显示

formSchema内部参数代码示例：

    formSchema: {
        labelWidth: 80,//label宽度
        properties: {
          name: {
            type: 'input', //* **必填 */
            value: '', //* **必填 */
            defaultValue: 'name',
            disabled: true,
            ui: {
              offset: 1, // 偏移量
              col: 23, // 占用格数，总分24格
              label: 'first name',
              placeholder: 'first name'
            }，
            rules: {
              required: true,
              // type: 'number',
              // min:1,
              max: 100,
              otherRules: [{ pattern: /^1[345789]\d{9}$/, trigger: 'blur' }]
            }
          },
          password: {
            type: 'input',
            inputType: 'password',
            value: '',
            ui: {
              showLabel: false, //是否显示label，优先级高于label
              label: 'password',
              // col: 6,
              placeholder: 'passowrd'
            }
          },
          textarea: {
            type: 'textarea',
            value: '',
            ui: {
              label: 'textarea',
              // col: 6,
              placeholder: 'textarea',
              minRows: 3, //最小行数
              maxRows: 6 //最大行数
            }
          },
          number: {
            type: 'number',
            value: 0,
            ui: {
              label: 'number',
              col: 8,
              precision: 2 // 精度
            },
            rules: {
              min: 1,
              max: 100,
              type: 'number' //* **必填 */
            }
          },
          select: {
            type: 'select',
            value: '',
            ui: {
              label: 'select',
              col: 8,
              list: [],
              filterable: true, // 是否搜索
              // hasEmptyOption: true, // 是否需要空项，用于展示列表‘全部’，‘请选择’等空项
              sendField: 'code' // 发给后台的字段，默认发id
            },
            changeEv: (val) => { // 变化值的回调函数
              console.log('select', val)
            }
          },
          cascader: {
            type: 'cascader',
            value: [],
            ui: {
              label: 'cascader',
              col: 8,
              list: [
                {
                  value: 'beijing',
                  label: '北京',
                  children: [
                    {
                      value: 'gugong',
                      label: '故宫'
                    },
                    {
                      value: 'tiantan',
                      label: '天坛'
                    },
                    {
                      value: 'wangfujing',
                      label: '王府井'
                    }
                  ]
                }
              ]
            }
          },
          datepicker: {
            type: 'datepicker',
            dateType: 'daterange',
            value: [],
            ui: {
              label: 'datepicker',
              col: 8,
              options: { // 日期选择配置
                disabledDate (date) {
                  return date && date.valueOf() < Date.now() - 88400000
                }
              },
              format: 'yyyy-MM-dd' //格式
            },
            changeEv: (params) => {
              console.log('date', params)
            }
          },
          timepicker: {
            type: 'timepicker',
            dateType: 'timerange',
            value: [],
            ui: {
              label: 'timepicker',
              col: 8,
              format: 'HH:mm:ss'
            },
            changeEv: (params) => {
              console.log('time', params)
            }
          },
          radio: {
            type: 'radio',
            value: '',
            ui: {
              label: 'radio',
              col: 8,
              list: []
            }
          },
          check: {
            type: 'check',
            value: [],
            ui: {
              label: 'check',
              col: 8,
              list: [
                {
                  id: '123',
                  name: '数据'
                }
              ]
            }
          },
          switch: {
            type: 'switch',
            value: true,
            ui: {
              label: 'switch',
              col: 8,
              size: 'small'
            },
            changeEv: (params) => {
              console.log('switch', params)
            }
          },
          slot: { //插槽类型，适用于不属于上列类型之外的自定义组件等更灵活的组件
            type: 'slot',
            slotName: 'myItem',
            ui: {
              col: 8,
              label: 'slot'
            }
          }
        }
      }
    

插槽类型示例（配置如上所述，dom如下所示）：

    <json-config-form ref="myDemoForm" :formSchema="formSchema">
      <div slot="myItem">
        <Button>插槽示例</Button>
      </div>
    </json-config-form>

表单校验

this.$refs.yourDomRefName.$emit('validateCommonForm',(valid)=>{
  if (valid) {
    console.log(1,this.sendCode.obj)
  }else{
    console.log(2)
  }
})

表单重置

this.$refs.yourDomRefName.$emit('resetCommonForm')