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();},
获取表单数据
我们通过submit函数获取表单数据
// 提交sure() {let dom = this.selectComponent("#dc-vant-form");console.log(dom.submit());}
表单回显
在初始化时，可以传入表单详情，我们会根据配置项回显表单数据。
// 表单详情数据
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();
},
单项数据修改
我们提供onAccept函数，用于接收指定表单项的修改
onAccept接收三个参数，依次为：value、key、place
| 参数 | 说明 |
|---|---|
| value | 更改的值 |
| key | 表单中对应的key |
| place | 如果是数字间隔修改器，需要传入place，分为两个固定参数：left、right，表示需要修改间隔输入框的左侧和右侧 |
// 修改某项
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(👈点击直达)
