由于日期选择在移动应用中大部分都是使用弹出单独窗口的形式来进行选择,如果某一个表单界面中大量的使用原生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 事件,如有需要可以监听并做相应的逻辑处理