工作记录:基于vant组件库中van-datetime-picker日期选择组件,进行二次封装

在移动应用中,表单界面大量使用原生vant库日期选择组件需写大量重复代码。为便于维护和保持代码整洁,对其进行了二次封装,并给出了封装组件代码、使用方法,包括html和JS部分。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

由于日期选择在移动应用中大部分都是使用弹出单独窗口的形式来进行选择,如果某一个表单界面中大量的使用原生vant库中的日期选择组件时,则需要写大量重复代码,因此做了二次封装,便于后期的维护及代码的整洁性。
二次封装的组件代码:


<van-datetime-picker ref=“picker” v-model=“currentDate” v-bind="$attrs" @confirm=“confirmHandle” @cancel=“hide” />

使用方法:
html部分:
<gs-m-datetime ref=“startDate” type=“date” title=“服务开始日期” v-model=“dataInfo.startDate” @confirm=“calcServiceDays” >
JS部分:
this.$refs.startDate.show() // 此方法可以弹出日期选择组件的界面,选择完成之后则会派发 confirm 事件,如有需要可以监听并做相应的逻辑处理

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值