lp-vant-form微信小程序动态表单

这篇具有很好参考价值的文章主要介绍了lp-vant-form微信小程序动态表单。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

功能

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

属性rule

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

配置input

返回值 string :输入框文本值

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

lp-vant-form,微信小程序,微信小程序,notepad++,小程序

配置picker

返回值 object :当前选中的数据项,在原有数据源上增加 idname 属性

参数 说明 类型 默认值 备注
type 表单类型picker string 必填
field 字段名 string 必填
title 字段名称 string 必填
value 当前值 object id : 1
name : ‘张三’
required 是否必填 boolean false
disabled 是否禁用 boolean false
placeholder 输入框为空时占位符 string
options 下拉选项 array options与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 数据项id string id
label 显示标签 string name
fetch
参数 说明 类型 默认值 备注
action 接口地址 string 必填
method 请求方法 string
data 携带数据 object
headers header信息 object
parse 解析函数 function 需要处理为数组返回,如果返回值是无效的会提示报错,所以这里面可以做一些逻辑判断
link 依赖参数 array fetch.link
fetch link

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

参数 说明 类型 默认值 备注
field 来源字段 string —— 取最外层的field字段名
fieldVal 字段数据 string —— 如果来源数据是对象,需要指定取哪个值
params fetch请求参数
示例
{
	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'
	}
}

lp-vant-form,微信小程序,微信小程序,notepad++,小程序

配置upload

返回值 array :图片地址

参数 说明 类型 默认值 备注
type 表单类型upload string 必填
field 字段名 string —— 必填
title 字段名称 string ——
max 文件上传数量限制 number 12
capture 上传类型 string/array [‘album’, ‘camera’] 新增delay延时拍照
example 示例图 array 属性urlcontent
tips 上传规则提示 string
fetch 文件上传 object 见fetch表
format 数据格式化 function
validate 字段验证 function
message 字段错误提示 string
fetch
参数 说明 类型 默认值 备注
action 接口地址 string 必填
data 携带数据 object
headers header信息 object
name 文件对应的 key string
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 表单类型 address string 必填
field 字段名 string 必填
title 字段名称 string 必填
required 是否必填 boolean false
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 : 当 modemultiplerange时为数组 ,其它类型为字符串

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

lp-vant-form,微信小程序,微信小程序,notepad++,小程序

实战

lp-vant-form,微信小程序,微信小程序,notepad++,小程序

<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(',')
        }
      }
]

lp-vant-form,微信小程序,微信小程序,notepad++,小程序

lp-vant-form,微信小程序,微信小程序,notepad++,小程序
原文阅读文章来源地址https://www.toymoban.com/news/detail-768234.html

到了这里,关于lp-vant-form微信小程序动态表单的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序动态生成表单来啦!你再也不需要手写表单了!

    由于我们在小程序上涉及到数据采集业务,需要经常使用表单,微信小程序的表单使用起来非常麻烦,数据和表单是分离的,每个输入框都需要做数据处理才能实现响应式数据,所以我开发了 dc-vant-form ,针对原生微信小程序+ vant 组件构建的自定义表单,开发者可以通过表单

    2024年01月17日
    浏览(51)
  • 微信小程序的动态表单,实现房屋租赁的多租客录入

    本文将介绍如何使用 微信小程序 编写 动态表单 ,最终实现 房屋租赁系统 中 多租客录入 的业务。 在阅读本文前,您需要对微信小程序的开发有一个初步的了解,以便更容易的学会开发动态表单。 作者主页 :Designer 小郑 作者简介 :浙江某公司软件工程师,负责开发管理公

    2024年02月09日
    浏览(47)
  • 微信小程序:动态修改自定义组件中vant-tab选中标签的大小并加粗标签

            1.在自定义组件的wxss文件里添加如下代码,此处还可以改变字体颜色之类的:         2.在自定义组件的json文件中修改组件样式隔离模式:        3.还遇到一个天坑的问题,这个自定义组件必须放在父组件的第一个引用位置,否则无法生效。我之前tab组件在upload组

    2024年02月06日
    浏览(54)
  • 微信小程序使用vant时报警告

     [Component] property \\\"value\\\" of \\\"miniprogram_npm/@vant/weapp/field/index\\\" received type-uncompatible value: expected String but get null value. Use empty string instead.  这个问题大概率是vant组自己的问题 降低微信开发者工具版本 降低到2.18.1之前的版本 这个问题是2.18.1时出现的    

    2024年02月12日
    浏览(52)
  • 微信小程序修改vant组件样式

    1 背景 在使用vant组件开发微信小程序的时候,想更改vant组件内部样式,达到自己想要的目的(van-grid组件改成宫格背景色为透明,默认为白色),官网没有示例,通过以下几步修改成功。 2 步骤 2.1 查看官方文档 Grid 外部样式类 支持修改Grid组件样式,我们在组件上添加该属

    2024年02月09日
    浏览(75)
  • 微信小程序Vant组件配置及使用

    Vant Weapp 官网文档:介绍 - Vant Weapp (gitee.io) Vant Weapp GitHub地址:youzan/vant-weapp: 轻量、可靠的小程序 UI 组件库 (github.com) 本教程使用下载代码方式引入vant组件 通过git下载vant源码 将vant源码路径下的 dist 文件夹复制到微信小程序项目中 将 app.json 下的 \\\"style\\\": \\\"v2\\\" 去除,微信小程序

    2024年02月13日
    浏览(78)
  • 原生微信小程序使用 wxs;微信小程序使用 vant-weapp组件

    在这里插入图片描述 操作顺序 :文档地址 如果使用 typescript 需要操作步骤3,否则不需要操作 2.1 在根目录下 操作 2.2 安装版本 2.3 构建包 - 详情-勾选使用 npm 2.4 使用 vant 组件

    2024年02月11日
    浏览(74)
  • 在微信小程序中怎么使用vant框架?

    Vant 是一个轻量、可定制的移动端组件库,于 2017 年开源。 目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。 Vant 是有赞前端团队开源的移动端组件库,于 2017 年开源,已持续维护 4 年时间。Vant 对内承载了有赞所

    2024年02月10日
    浏览(65)
  • uniapp微信小程序引入vant组件库

    1、首先要有uniapp项目,根据vant官方文档使用yarn或npm安装依赖: 安装完依赖如下: 2、在uniapp项目根目录下(也可以指定目录)本案例在根目录下新建:wxcomponents文件夹 !!!!必须是wxcomponents文件夹! !!!!必须是wxcomponents文件夹! !!!!必须是wxcomponents文件夹! (原

    2024年02月16日
    浏览(94)
  • iview form 动态表单

    最开始用得网上得 发现前面得红色必选项跟着变换,但是表单验证输入了还是显示不能为空 然后我用了v-if    结果,红色星号在,表单验证确是可以的 最终解决方法: 用 v-show !!!!!!!! div v-show=\\\"baseForm.receipt == \\\'11\\\'\\\" div v-show=\\\"baseForm.receipt== \\\'12\\\" 把需要输入的用v-show来验证就好了

    2024年02月08日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包