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

自定义表单示例：

初始化

在初始化前，需要先定义初始化配置，配置项如下：

注意点：

下面是示例：

"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

// 修改某项
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')

 }

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