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'
				}
			}
		]
	}
]