企业手册模板,长春网站排名优化,做个网站做什么呢,淄博云网信息技术有限公司dc-vant-form
由于我们在小程序上涉及到数据采集业务#xff0c;需要经常使用表单#xff0c;微信小程序的表单使用起来非常麻烦#xff0c;数据和表单是分离的#xff0c;每个输入框都需要做数据处理才能实现响应式数据#xff0c;所以我开发了dc-vant-form#xff0c;…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表单labelmodule表单绑定的数据keytype表单组件类型值对应1文本、2小数、3整数、4级联选择器、5文本域、6时间选择器、7数字间隔输入器isRequired是否星号校验值对应true、falseoptions表单下拉菜单项值对应数组对象[{label: ‘红色’,value: ‘red’}]dateType时间选择器类型默认标准时间选择器值对应datetime标准时间、date年月日、year-month年月
注意点
类型说明type: 4必须配置options项你可以给它默认值空数组[]type: 6必须配置dateType项你可以选择三种对应值datetime、date、year-monthtype: 7必须配置 beginModule、endModule分别对应左侧、右侧输入框type为7不需要配置module项
下面是示例
usingComponents: {dc-vant-form: /miniprogram_npm/dc-vant-form/dc-vant-form/index}页面
dc-vant-form iddc-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表单中对应的keyplace如果是数字间隔修改器需要传入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(点击直达)
