书洞笔记

外观

技术文章

lp-vant-form动态表单

1944字约6分钟

微信小程序动态表单

2024-05-16

lp-vant-form 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。

功能

  • 依赖 Vant Weapp UI 组件库
  • 通过 JSON 生成表单
  • 支持数据联动
  • 数据验证
  • 数据处理
  • 内置组件
    • input
    • picker
    • date
    • upload
    • address

属性rule

通过 JSON 快速的配置表单项规则。内置多种场景、功能的表单组件，轻松搞定表单流程收集。

配置input

返回值 string ：输入框文本值

参数说明类型默认值备注
type表单类型inputstring必填
field字段名string必填
title字段名称string必填
value当前值string/number
required是否必填booleanfalse
readonly是否只读booleanfalse
disabled是否禁用booleanfalse
placeholder输入框为空时占位符string
dataType输入框类型text textareastringtext
format格式化文本function
validate字段验证function如果没有检验方法则以required来判空校验
message字段错误提示string

示例

{
	type: 'input',
	field: 'nickname',
	title: '姓名',
	required: true,
	placeholder: '请输入姓名',
	message: '请输入姓名'
}

在这里插入图片描述

配置picker

返回值 object ：当前选中的数据项，在原有数据源上增加 id 和 name 属性

参数说明类型默认值备注
type表单类型pickerstring必填
field字段名string必填
title字段名称string必填
value当前值objectid : 1
name : '张三'
required是否必填booleanfalse
disabled是否禁用booleanfalse
placeholder输入框为空时占位符string
options下拉选项arrayoptions与fetch互斥，fetch优先级高
fetch选项接口数据object见fetch表options与fetch互斥，fetch优先级高
props配置选项object见props表
format格式化数据function
validate字段验证function如果没有检验方法则以required来判空校验
message字段错误提示string

props

options默认选项数据使用 id 和 name 属性，属性不一致需要使用props指定某个属性，指定后会在原有数据中添加 id 和 name 属性。

参数说明类型默认值备注
id数据项idstringid
label显示标签stringname

fetch

参数说明类型默认值备注
action接口地址string必填
method请求方法string
data携带数据object
headersheader信息object
parse解析函数function需要处理为数组返回，如果返回值是无效的会提示报错，所以这里面可以做一些逻辑判断
link依赖参数array见fetch.link表

请求参数依赖与其它参数时，需要指定来源与哪个字段，如果是picker这样的数据是对象则需要指定取哪个属性，最后通过params指定data中的参数。依赖数据变更清除所有有关联字段的数据。

参数说明类型默认值备注
field来源字段string——取最外层的field字段名
fieldVal字段数据string——如果来源数据是对象，需要指定取哪个值
paramsfetch请求参数

示例

{
	type: 'picker',
	field: 'storeid',
	title: '门店',
	required: true,
	placeholder: '请选择门店',
	message: '请选择门店',
	fetch: {
		action: '',
		method: 'post',
		data: {
			a: ''
		},
		link: [{
			field: 'areaid',
			fieldVal: 'areaid',
			params: 'areaid'
		},
		{
			field: 'agentid',
			fieldVal: 'agentid',
			params: 'agentid'
		}],
		parse: res => {
			return res.data
		}
	},
	format: val => {
		return val['storeid']
	},
	props: {
		id: 'storeid',
		label: 'name'
	}
}

在这里插入图片描述

配置upload

返回值 array ：图片地址

参数说明类型默认值备注
type表单类型uploadstring必填
field字段名string——必填
title字段名称string——
max文件上传数量限制number12
capture上传类型string/array['album', 'camera']新增delay延时拍照
example示例图array属性url、 content
tips上传规则提示string
fetch文件上传object见fetch表
format数据格式化function
validate字段验证function
message字段错误提示string

fetch

参数说明类型默认值备注
action接口地址string必填
data携带数据object
headersheader信息object
name文件对应的 keystring
parse解析函数function须有返回值

示例

{
	type: 'upload',
	field: 'picurl',
	message: '请至少上传两张照片'
	fetch: {
		action: '',
		name: 'file',
		headers: {},
		data: {},
		parse: res => {
			return 'https://aaa.com/file/' + res.data
		}
	},
	tips:'建议尺寸900*400，最多6张，单个图',
	example:[],
	validate: res => {
		return res.length > 1
	},
	format: res => {
		return res.join(',')
	}
}

配置address

返回值 string ： 地址字符串

参数说明类型默认值备注
type表单类型 addressstring必填
field字段名string必填
title字段名称string必填
required是否必填booleanfalse
mode模式string见mode表必填
source数据来源object属性一：field-来源字段
属性二：fieldVal-数据取数（如果来源字段是对象需要指定取数字段属性）
format格式化数据function
validate字段验证function
message字段错误提示string

mode

地址显示使用到 wx.getLocation wx.chooseLocation 所以需要获取到对应的权限及配置方能使用

模式说明备注
auto自动定位使用 qqmap-wx-jssdk 进行坐标解析，达到自动定位，需要在后台加入请求接口白名单
rely来源获取例如：我选择门店，通过门店带出门店地址，则可以使用这个模式
choose选择地址使用 wx.getLocation wx.chooseLocation 来选择地址

示例

{
	type: 'address',
	field: 'address',
	title: '门店地址',
	mode: 'rely', //auto,rely,choose
	required: true,
	message:'请获取门店地址',
	source: {
		field: 'storeid',
		fieldVal: 'addres'
	}
},

配置date

返回值 string | array ： 当 mode 为multiple或range时为数组 ，其它类型为字符串

参数说明类型默认值备注
type表单类型 datestring必填
field字段名string必填
title字段名称string必填
placeholder输入框为空时占位符string
minDate可选择的最小日期timestamp当前日期
maxDate可选择的最大日期timestamp当前日期的六个月后
maxRange日期区间最多可选天数number/string无限制当mode为range时生效
separator日期格式string-如 2023-12-18
required是否必填booleanfalse
disabled是否禁用booleanfalse
mode选择类型:
single表示选择单个日期
multiple表示选择多个日期
range表示选择日期区间
auto 表示自动时间		stringsingle当mode为auto时，其它针对性的配置不生效
format格式化文本function
validate字段验证function
message字段错误提示string

示例

{
	type: 'date',
	field: 'time',
	title: '日期',
	required: true,
	placeholder: '请选择日期',
	message: '请选择日期'
}

在这里插入图片描述

实战

在这里插入图片描述

<lp-vant-form rule="{{rule}}" bind:submit="submit"></lp-vant-form>
[
{
        type: 'picker',
        field: 'areaid',
        title: '省份',
        required: true,
        placeholder: '请选择省份',
        message: '请选择省份'
        fetch: {
          action: 'xxxx',
          method: 'post',
          parse: res => {
            return res.data
          }
        },
        format: val => {
          return val['areaid']
        },
        props: {
          id: 'areaid',
          label: 'name'
        }
      },
      {
        type: 'picker',
        field: 'agentid',
        title: '经销商',
        required: true,
        placeholder: '请选择经销商',
        message: '请选择经销商',
        fetch: {
          action: 'xxxx',
          method: 'post',
          link: [{
            field: 'areaid',
            fieldVal: 'areaid',
            params: 'areaid'
          }],
          parse: res => {
            return res.data
          }
        },
        format: val => {
          return val['agentid']
        },
        props: {
          id: 'agentid',
          label: 'name'
        }
      },
      {
        type: 'picker',
        field: 'storeid',
        title: '门店',
        required: true,
        placeholder: '请选择门店',
        message: '请选择门店',
        fetch: {
          action: 'xxxxx',
          method: 'post',
          data: {
            a: ''
          },
          link: [{
              field: 'areaid',
              fieldVal: 'areaid',
              params: 'areaid'
            },
            {
              field: 'agentid',
              fieldVal: 'agentid',
              params: 'agentid'
            }
          ],
          parse: res => {
            return res.data
          }
        },
        format: val => {
          return val['storeid']
        },
        props: {
          id: 'storeid',
          label: 'name'
        }
      },
       {
        type: 'date',
        field: 'time',
        title: '日期',
        required: true,
        placeholder: '请选择日期',
        message: '请选择日期'
      },
       {
        type: 'address',
        field: 'address',
        title: '门店地址',
        mode: 'rely', 
        required: true,
        message: '请获取门店地址',
        source: {
          field: 'storeid',
          fieldVal: 'addres'
        }
      },
       {
        type: 'input',
        field: 'nickname',
        title: '姓名',
        required: true,
        placeholder: '请输入姓名',
        message: '请输入姓名'
      },
       {
        type: 'input',
        field: 'remarks',
        title: '备注',
        placeholder: '请输入备注'
      },
      {
        type: 'upload',
        field: 'picurl',
        fetch: {
          action: 'xxxx',
          name: 'file',
          headers: {},
          data: {},
          parse: res => {
            return 'https://xxxxx.cn/file/' + res.data
          }
        },
        tips: '建议尺寸900*400，最多6张，单个图',
        message: '请至少上传一张照片',
        example: [],
        validate: res => {
          return res.length > 0
        },
        format: res => {
          return res.join(',')
        }
      }
]

在这里插入图片描述

在这里插入图片描述

书洞笔记