van-form

初次尝试封装组件，可能很多地方没有考虑全面，功能使用可能没有那么舒服，请见谅！

表单添加方法

• html

<v-form v-model="form" :model="model" @change="change"></v-form>

props

| 字段名 | 说明 | 类型 | 默认值 | | -------------- | ------------------------------- | ------ | ------ | | v-model(value) | 获取组件处理完成的数据 | object | {} | | model | 数据模型(具体类型参考后续文档) | object | {} | | isSetItem | 表单项之间是否有间距 ｜ Boolean | false |

events

| 事件名 | 说明 | 回调参数 | | ------ | ------------------------ | ------------------------------ | | change | 数据更改时触发 | object{value,errorMsg,isValid} | | event | 数据发生改变所发送的事件 | object{event,formModel} |

组件发生 change 事件返回的数据

{
  "value": {}, // 所有的数据经过处理后会以一个对象存放在这个字段
  "errorMsg": [], // 所有的校验失败的错误信息集合
  "isValid": false // 是否有通过所有的校验标识
}

model 数据格式

| 字段名 | 说明 | 类型 | 默认值 | 可选值 | | :------------- | :--------------------------------------------------------------------------------- | :----------- | :-----: | :-------------------------------------------------------------------------------------: | | title | 多个表单模块存在时，单个模块的 title | String | ' ' | | | ref | 单个模块的 ref | String | ' ' | | | items | 单个模块内具体的表单项 | Array | [] | | | type | 表单项类型 | String | ‘’ | VInput/VCheckbox/VRadio/VSelect/VAction/VDatePicker/VSwitch/VRate/VCell/VCascader/Scope | | show | 控制是否显示该项,非必填,默认显示,不写默认为 true | Boolean | true | | | disabled | 控制是否禁用表单项 ,非必填 默认不禁用,不写默认为 false | Boolean | false | | | subType | 输入框或时间组件时，具体类型的选项值 | String | ' ' | date time year-month month-day textarea,password,tel,digit,number | | prop | 表单项绑定的属性 | String | ' ' | | | value | 表单项绑定的属性的值 | String/Array | ' '/[] | | | width | 控制 label 的宽度 | String | ' ' | 数字+px | | placeholder | 表单项的提示文字 | String | ‘ ’ | | | validate | 表单项验证规则,自定义时如果需要添加验证，也必须有这个属性,不需要验证时不填这个属性 | Object | {} | | | validate.text | 表单验证未通过时的提示文字 | String | ' ' | | | validate.type | 该表单项是否为必填项,type 值为 required 时为必填 | String | ' ' | | | validate.rules | 表单项验证规则，返回结果为是否通过验证的 true 和 false | Function | ()=>{ } | |

以下是一个简单的数据格式，生成一个输入框，详细使用见目录 example

注意事项

type 为 scope 时，验证添加同其他类型一致，需要有 prop 和 value 属性

实例

• js

const model = [
	{
		title: '建筑物基本信息',
		ref: 'base',
		items: [

      {
        type: 'scope',
        show： true,
        scope: ()=>{
          return html
        }
      },
			{
				label: '建筑物名称',
				type: 'VInput',
        show： true,
				prop: 'buildingName',
				value: '',
				placeholder: '请输入建筑物名称',
				disabled: false,
				validate: {
					text: '请输入建筑物名称',
					type: 'required'
				}
			},
			{
				label: '建筑物地址',
				type: 'VInput',
        show： true,
				subType: 'textarea',
				prop: 'buildingAddress',
				value: '',

				placeholder: '请输入建筑物地址',
				disabled: false,
				validate: {
					text: '请输入建筑物地址',
					type: 'required'
					// rules: this.validateStrongPassword
				}
			},
			{
				label: '复选框',
				type: 'VCheckbox',
        show： true,
				placeholder: '请输入复选框',
				direction: 'horizontal',
				disabled: false,
				value: [],
				options: [
					{ label: '复选框 a', value: 'a' },
					{ label: '复选框 b', value: 'b' },
					{ label: '复选框 c', value: 'c' }
				],
				validate: {
					text: '请输入复选框',
					type: 'required'
				}
			},
			{
				label: '是否拆除',
				type: 'VSwitch',
        show： true,
				prop: 'isbuilding',
				value: true,

				disabled: false,
				validate: {
					text: '请确认是否拆除',
					type: 'required'
				}
			},
			{
				label: '建设时间',
				type: 'VDatePicker',
        show： true,
				subType: 'datetime',
				prop: 'buildingtime',
				value: '',
				title: '选择年月日',
				placeholder: '请选择建设时间',
				disabled: false,
				validate: {
					text: '请选择建设时间',
					type: 'required'
				}
			},
			{
				label: '评分星级',
				type: 'VRate',
        show： true,
				prop: 'rate',
				value: 0,
				placeholder: '请选择评分星级',
				disabled: false,
				size: 30,
				count: 7,
				color: '#ff0000',
				voidColor: '#00ff00',
				validate: {
					text: '请选择评分星级',
					type: 'required'
				}
			}
		]
	},
	{
		title: '建筑公司基本信息',
		ref: 'companyBase',
		items: [
			{
				label: '建筑公司名称',
				type: 'VSelect',
        show： true,
				prop: 'buildingCompanyName',
				value: '',
				width: '120px',

				placeholder: '请输入建筑公司名称',
				disabled: false,
				options: [
					{ text: '杭州', value: 1 },
					{ text: '宁波', value: 2 },
					{ text: '温州', value: 3 },
					{ text: '嘉兴', value: 4 },
					{ text: '湖州', value: 5 }
				],
				validate: {
					text: '请输入建筑公司名称',
					type: 'required'
				}
			},
      {
        label: "事件等级",
        type: "VAction",
        show： true,
        prop: "level",
        value: "",
        placeholder: "请选择事件等级",
        disabled: false,
        options: [
          {
            name: "特级",
            value: "2"
          },
          {
            name: "紧急",
            value: "1"
          },
          {
            name: "一般",
            value: "0"
          }
        ],
        validate: {
          text: "请选择事件等级",
          type: "required"
        }
      }
			{
				label: '单选框',
				type: 'VRadio',
        show： true,
				prop: 'buildingCompanyAddress',
				value: '',
				width: '120px',
				placeholder: '请选择单选框',
				disabled: false,
				direction: 'horizontal',
				options: [
					{ label: '复选框 a', value: 'a' },
					{ label: '复选框 b', value: 'b' },
					{ label: '复选框 c', value: 'c' }
				],
				validate: {
					text: '请选择单选框',
					type: 'required'
				}
			}
		]
	}
]