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

dc-vant-form

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

1、🚩解决微信小程序表单双向绑定问题

2、👍解决微信小程序下拉弹框值与表单绑定问题

3、✨配置项自动生成表单

4、🎉表单详情通过配置项控制详情回显

5、🚀操作表单单项数据修改

6、🔥提供9种输入组件覆盖表单的大部分业务场景

说明

1、在使用前需要保证项目中安装了vant

2、在使用表单之前,你需要准备表单渲染的数据,以及当前用作回显的详情数据。

3、该表单提供了9种输入组件,分别为:文本、小数、整数、级联选择器、文本域、数字间隔输入器、标准时间选择器、年月日时间选择器、年月时间选择器。

4、初始化时配置参数必传,表单可传可不传,若只传配置参数,我们会根据配置参数自动生成表单。

5、表单提供编辑回显、单条数据传入回显。

6、通过getInit函数初始化表单,通过submit函数获取表单结果。


开始

npm i dc-vant-form

自定义表单示例:

初始化

在初始化前,需要先定义初始化配置,配置项如下:

key说明
label表单label
module表单绑定的数据key
type表单组件类型,值对应:1文本、2小数、3整数、4级联选择器、5文本域、6时间选择器、7数字间隔输入器
isRequired是否星号校验,值对应:true、false
options表单下拉菜单项,值对应数组对象:[{label: ‘红色’,value: ‘red’}]
dateType时间选择器类型,默认标准时间选择器,值对应:datetime标准时间、date年月日、year-month年月

注意点

类型说明
type: 4必须配置options项,你可以给它默认值空数组[]
type: 6必须配置dateType项,你可以选择三种对应值:datetime、date、year-month
type: 7必须配置 beginModule、endModule,分别对应左侧、右侧输入框;type为7不需要配置module项

下面是示例:

"usingComponents": {"dc-vant-form": "/miniprogram_npm/dc-vant-form/dc-vant-form/index"}

页面:

<dc-vant-form id="dc-vant-form" />

配置项:

config: [{label: '详细地址',module: 'address',type: 1, isRequired: true},{label: '商品类型',module: 'goodsType',type: 4,isRequired: true,options: [{id: 1,label: '电子产品',value: 101},{id: 2,label: '儿童玩具',value: 102},{id: 3,label: '服装饰品',value: 103}]},{label: '商品颜色',module: 'goodsColor',type: 4,isRequired: true,options: [{id: 1,label: '红色',value: 'red'},{id: 2,label: '青色',value: 'cyan'},{id: 3,label: '绿色',value: 'green'}]},{label: '包装体积',module: 'packingVolume',type: 2,isRequired: false},{label: '商品重量',module: 'goodsWeight',type: 2,isRequired: true},{label: '商品结构',module: 'goodsStructure',type: 4,isRequired: true,options: [{id: 1,label: '成品',value: 2230},{id: 2,label: '组装',value: 2231}]},{label: '商品数量',module: 'goodsNumber',type: 3,isRequired: false},{label: '可购范围',beginModule: 'beginLimit',endModule: 'endLimit',type: 7,isRequired: false},{label: '联系人',module: 'contact',type: 1,isRequired: false},{label: '创建时间',module: 'createDate',type: 6,dateType: 'date',isRequired: true},{label: '标准时间',module: 'createDate2',type: 6,dateType: 'datetime',isRequired: true},{label: '选区年月',module: 'createDate3',type: 6,dateType: 'year-month',isRequired: true},{label: '备注',module: 'remark',type: 5,isRequired: false}]

我们将上面的配置项传入init函数初始化表单

  // 数据初始化init() {let dom = this.selectComponent("#dc-vant-form");dom.getInit(this.data.config)},onLoad(options) {this.init();},

image-20231118110736510


获取表单数据

我们通过submit函数获取表单数据

  // 提交sure() {let dom = this.selectComponent("#dc-vant-form");console.log(dom.submit());}

image-20231118112342663

image-20231118112407795


表单回显

在初始化时,可以传入表单详情,我们会根据配置项回显表单数据。

// 表单详情数据
form: {address: '浙江省杭州市',goodsType: 101,goodsColor: 'red',packingVolume: 10,goodsWeight: 5,goodsStructure: 2230,goodsNumber: 100,beginLimit: 1,endLimit: 10,contact: 'DCodes',createDate: '2023-01-01',createDate2: '2023-01-01 20:00:00',createDate3: '2023-01',remark: '这是一个动态的文本域'
}
init() {let { config,form } = this.data;let dom = this.selectComponent("#dc-vant-form");dom.getInit(config, form)
},onLoad(options) {this.init();
},

image-20231118112138758


单项数据修改

我们提供onAccept函数,用于接收指定表单项的修改

onAccept接收三个参数,依次为:value、key、place

参数说明
value更改的值
key表单中对应的key
place如果是数字间隔修改器,需要传入place,分为两个固定参数:left、right,表示需要修改间隔输入框的左侧和右侧

bandicam 2023-11-16 16-14-16-944 00_00_00-00_00_30~1

// 修改某项
update() {let dom = this.selectComponent("#dc-vant-form");// 普通类型// dom.onAccept('浙江省杭州市', 'address')// 级联选择器-value为options中的key// dom.onAccept(103, 'goodsType')// 数字间隔输入器// dom.onAccept(1, 'beginLimit', 'left')// dom.onAccept(3, 'endLimit', 'right')}

如果觉得该组件不错,欢迎点赞👍、收藏💖、转发✨哦~

阅读其它:

微信小程序用户隐私API(👈点击直达)

前端换肤,聊一聊主题切换那些事(👈点击直达)

Shapes布局-文字环绕动画(👈点击直达)

css绘制一个Pinia小菠萝(👈点击直达)

深入理解Promise(👈点击直达)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/146766.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【开源】基于Vue.js的社区买菜系统的设计和实现

项目编号&#xff1a; S 011 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S011&#xff0c;文末获取源码。} 项目编号&#xff1a;S011&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、系统设计2.1 功能模块设计2.1.1 数据中心模块2.1…

【uniapp】 video视频层级、遮挡其他弹窗或顶部导航 使用nvue覆盖

uniapp 顶部导航和弹窗被video遮挡解决办法 第一步&#xff1a;配置 subNVues {"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app","navigationStyle": "custom","app-…

对话芯动科技 | 助力云游戏 4K级服务器显卡的探索与创新

2021年芯动科技推出了基于IMG BXT GPU IP的风华1号显卡。单块风华1号显卡可在台式机和云游戏中实现4K级别的性能&#xff0c;渲染能力达到5 TFLOPS&#xff0c;如果在服务器中同时运行两块显卡&#xff0c;性能还可翻倍。该显卡是为不断扩大的安卓云游戏市场量身定制的&#xf…

隐私协议 Secret Network 宣布使用 Octopus Network 构建的 NEAR-IBC 连接 NEAR 生态

2023年11月 NearCon2023 活动期间&#xff0c;基于 Cosmos SDK 构建的隐私协议 Secret Network&#xff0c;宣布使用 Octopus Network 开发的 NEAR-IBC&#xff0c;于2024年第一季度实现 Secret Network 与 NEAR Protocol 之间的跨链交互。 这将会是Cosmos 生态与 NEAR 之间的首…

GZ033 大数据应用开发赛题第04套

2023年全国职业院校技能大赛 赛题第04套 赛项名称&#xff1a; 大数据应用开发 英文名称&#xff1a; Big Data Application Development 赛项组别&#xff1a; 高等职业教育组 赛项编号&#xff1a; GZ033 …

[C国演义] 哈希的使用和开闭散列的模拟实现

哈希的使用和开闭散列的模拟实现 1. 使用1.1 unordered_map的接口1.2 unordered_set的接口 2. 哈希底层2.1 概念2.2 解决哈希冲突 3. 实现3.1 开放寻址法3.2 拉链法 1. 使用 1.1 unordered_map的接口 构造 void test1() {// 空的unordered_map对象unordered_map<int, in…

动态头像如何制作?这个方法请收藏

照片是记录生活的一种方式&#xff0c;但是静态图片有时候不能够完全表达我们的情感。而动态的图片能够让图片以更生动的方式来展示我们的想象力和内心情感。那么&#xff0c;大家知道动态图片制作的方法有哪些吗&#xff1f;使用gif动画制作&#xff08;https://www.gif.cn/&a…

React项目首页中用canvas实现星空

文章目录 前言代码使用后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;前端系列文章 &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正在不断努力填补技术短板。(如果出现错误&#xff0c;感谢大家…

Element UI之Checkbox 多选框

Checkbox 多选框 在一组选项中进行多选 按需引入方式 如果是完整引入可跳过此步骤 import Vue from vue import { Checkbox, CheckboxGroup } from element-ui import element-ui/lib/theme-chalk/base.css import element-ui/lib/theme-chalk/checkbox.css import element…

两个macos命令

ldd替代: otool -L strace替代: sudo dtruss

机器学习笔记 - 隐马尔可夫模型的简述

隐马尔可夫模型是一个并不复杂的数学模型,到目前为止,它一直被认为是解决大多数自然语言处理问题最为快速、有效的方法。它成功地解决了复杂的语音识别、机器翻译等问题。看完这些复杂的问题是如何通过简单的模型得到描述和解决,我们会由衷地感叹数学模型之妙。 人类信息交流…

数据结构与算法设计分析——常用搜索算法

目录 一、穷举搜索二、图的遍历算法&#xff08;一&#xff09;深度优先搜索&#xff08;DFS&#xff09;&#xff08;二&#xff09;广度优先搜索&#xff08;BFS&#xff09; 三、回溯法&#xff08;一&#xff09;回溯法的定义&#xff08;二&#xff09;回溯法的应用 四、分…

Python学习笔记--进程

进程 Python 中的多线程其实并不是真正的多线程,如果想要充分地使用多核 CPU 的资源,在 Python 中大部分情况需要使用多进程。 Python 提供了非常好用的多进程包 multiprocessing,只需要定义一个函数,Python 会完成其他所有事情。 借助这个包,可以轻松完成从单进程到并…

EfficientNet:通过模型效率彻底改变深度学习

一、介绍 EfficientNet 是深度学习领域的里程碑&#xff0c;代表了神经网络架构方法的范式转变。EfficientNet 由 Google Research 的 Mingxing Tan 和 Quoc V. Le 开发&#xff0c;在不影响性能的情况下满足了对计算高效模型不断增长的需求。本文深入探讨了 EfficientNet 背后…

百度搜索智能化算力调控分配方法

作者 | 泰来 导读 随着近年深度学习技术的发展&#xff0c;搜索算法复杂度不断上升&#xff0c;算力供给需求出现了爆发式的增长。伴随着AI技术逐步走到深水区&#xff0c;算法红利在逐步消失&#xff0c;边际效应日益显著&#xff0c;算力效能的提升尤为重要&#xff0c;同时随…

每日一练 | 华为认证真题练习Day132

1、ACL本质上是一种报文过滤器&#xff0c;将ACL在业务模块中应用&#xff0c;ACL才能生效。 A. 对 B. 错 2、某个ACL规则如下&#xff1a;则下列哪些IP地址可以被permit规则匹配&#xff1f;&#xff08;多选&#xff09; rule 5 permit ip source 10.0.1.0 0.0.254.255 A…

视频修复软件 Aiseesoft Video Repair mac中文版功能

AIseesoft Video RepAIr mac是一款专业的视频修复软件&#xff0c;主要用于修复损坏或无法播放的视频文件。AIseesoft Video RepAIr是一个功能强大的程序,可以帮助恢复丢失或损坏的数据的视频。只要您以相同的格式提供示例视频,并在功能强大的技术的支持下,只需单击几下即可收获…

如何正确规划 JVM 性能调优

JVM性能调优涉及到很多方面的权衡&#xff0c;其中某一方面可能会极大地影响整体性能。因此&#xff0c;需要综合考虑所有可能的影响。理解并遵循一些基本原则和理论将使性能调优变得更加容易。为了更好地理解本文的内容&#xff0c;您必须满足以下先决条件&#xff1a; 了解 …

Docker 笔记(一)--安装

Docker 笔记&#xff08;一&#xff09;–安装 记录Docker 安装操作记录&#xff0c;便于查询。 参考 链接: Docker 入门到实战教程(二)安装Docker链接: docker入门(利用docker部署web应用)链接: 阿里云容器镜像服务/镜像加速器/操作文档链接: 网易镜像中心链接: 阿里云镜像…