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

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

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

### 封装 `van-datetime-picker` 实现只选年份功能 为了实现仅选择年份的功能,可以通过自定义 Vue 组件封装 Vant 的 `van-datetime-picker` 组件。具体做法是在父组件中控制子组件的行为,并通过属性传递和事件监听的方式完成交互逻辑。 #### 自定义年选择器组件代码示例 ```vue <template> <div class="year-selector"> <!-- 触发弹窗 --> <van-field v-model="selectedYear" @click="togglePopup(true)" placeholder="请选择年份" readonly /> <!-- 底部弹出层 --> <van-popup v-model="popupVisible" position="bottom" :style="{ height: '40%' }"> <van-datetime-picker v-if="popupVisible" v-model="currentYear" type="year-month" title="选择年份" :min-date="minDate" :max-date="maxDate" :formatter="formatter" @confirm="onConfirm" @cancel="togglePopup(false)" /> </van-popup> </div> </template> <script> export default { data() { return { selectedYear: '', popupVisible: false, currentYear: new Date(), minDate: new Date(), // 当前时间作为最小可选项 maxDate: new Date(new Date().getFullYear() + 1, 0), // 最大可以选择未来一年内的日期 }; }, methods: { togglePopup(visible) { this.popupVisible = visible; }, onConfirm(value) { const year = value.getFullYear(); this.selectedYear = `${year}年`; this.togglePopup(false); }, formatter(type, val) { if (type === 'year') { return `${val}年`; } return val; } } }; </script> ``` 此代码片段展示了如何创建一个新的 Vue 单文件组件用于专门处理年份的选择操作[^1]。在这个例子中: - 使用了 `<van-field>` 来展示已选定的年份并触发底部弹框; - 利用了 `<van-popup>` 和 `<van-datetime-picker>` 构建了一个可以滚动选择年份的日历视图; - 设置了 `type="year-month"` 参数让 datetime picker 只显示年月部分,在实际应用时只需要关注年份即可; - 定义了 `formatter()` 方法来自定义格式化输出的内容为中文样式(如:“XXXX年”); - 添加了确认按钮点击后的回调函数 `onConfirm()` 处理最终选取的结果;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值