van-form v0.1.6

van-form

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

表单添加方法

• html

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

props

events

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

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

model 数据格式

以下是一个简单的数据格式，生成一个输入框，详细使用见目录 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'
				}
			}
		]
	}
]