本文详细介绍如何基于 Vant 库封装一个支持倒序排列的年月日期选择器组件。通过示例代码展示组件模板、样式及调用方式，重点解析如何将日期格式化为 202312 等自定义格式，并处理确认与取消事件，帮助开发者快速集成该功能。
需求分析与效果展示
如图所示，需要实现一个时间选择功能，且选项需按倒序排列。最终输出的时间格式为 202312，开发者可根据实际需求调整数据处理逻辑以适配其他格式。
组件封装代码实现
组件实现部分如下所示。
<template>
<div class="number">
<van-cell-group>
<van-field class="date-select" readonly clickable v-model="date" placeholder="选择时间"
@click="showPicker = true" />
<van-popup v-model="showPicker" round position="bottom">
<van-picker class="picker" show-toolbar :columns="columns" @change="onChange"
@cancel="showPicker = false" @confirm="onConfirm">
</van-picker>
</van-popup>
</van-cell-group>
</div>
</template>
<script>
export default {
name: 'DateSelect',
props: {
default: {
type: String,
default: ''
},
minYear: {
type: String,
default: '2014'
}
},
data() {
return {
date: this.default,
initTime: this.minYear,
columns: [],
checkTime: {},
showPicker: false
}
},
created() {
this.initTimeFn()
},
methods: {
initTimeFn() {
const initTime = this.initTime
const defaultYear = this.default.substring(0, 4)
const defaultMonth = this.default.substring(4)
// for (let i = 0; i <= Number(new Date().getFullYear()) - initTime; i++) {
for (let i = Number(new Date().getFullYear()); i >= initTime; i--) {
this.checkTime[`${i}年`] = [
'01月',
'02月',
'03月',
'04月',
'05月',
'06月',
'07月',
'08月',
'09月',
'10月',
'11月',
'12月'
]
}
const yearIndex = Object.keys(this.checkTime).findIndex((item) =>
item.includes(defaultYear)
)
this.columns = [
{
values: Object.keys(this.checkTime),
defaultIndex: yearIndex //Number(new Date().getFullYear()) - initTime
},
{
values: this.checkTime[`${new Date().getFullYear()}年`],
defaultIndex: Number(defaultMonth) //new Date().getMonth()
}
]
},
onCancel() {
this.showPicker = false
},
onConfirm(value) {
this.showPicker = false
let year = value && value[0].split('年')[0]
let month = value && value[1].split('月')[0]
this.date = this.userListForm = `${year}${month}`
this.$emit('getDate', this.userListForm)
},
onChange(picker, values) {
picker.setColumnValues(1, this.checkTime[values[0]])
}
}
}
</script>
<style lang="less">
.number {
width: 2.4rem;
.picker {
font-size: 0.32rem;
}
.van-cell {
padding: 0;
}
.date-select {
border: 1px solid rgb(74, 119, 246);
padding-left: 0.1rem;
border-radius: 0.1rem;
font-size: 0.32rem;
line-height: 1.5;
}
}
</style>组件调用与数据交互
在业务中使用该组件时，可通过监听事件获取选中的日期值。
<DateSelect @getDate="getDate" default="202312" /> getDate(date) {
this.date = date //自己组件使用的时间变量
this.getList()
},以上就是关于 Vant 倒序年月日期组件封装的详细介绍，更多相关内容请查阅本站过往文章或继续浏览后续教程，感谢大家的支持。