由于日期选择在移动应用中大部分都是使用弹出单独窗口的形式来进行选择,如果某一个表单界面中大量的使用原生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 事件,如有需要可以监听并做相应的逻辑处理
在移动应用中,表单界面大量使用原生vant库日期选择组件需写大量重复代码。为便于维护和保持代码整洁,对其进行了二次封装,并给出了封装组件代码、使用方法,包括html和JS部分。
497

被折叠的 条评论
为什么被折叠?



