vant倒序年月日期组件封装

本文主要是介绍vant倒序年月日期组件封装，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

如图，时间选择，倒序排列。时间格式  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.initTimeconst 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 = falselet 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倒序年月日期组件封装的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---