日期选择器组件
1.先来看看实现效果
2.在开发之前,要先了解清楚需要完成的需求再逐个优化 (以下主要介绍思路具体实现,随机应变)
1) UI方面我们需要实现上下滚动选择,需要注意的主要细节就是滚动结束后,需要自动校正位置,比如正好滚动到两个年份之间,这时应该自动滚向占比比较大的一方
2) 第二个需要注意的就是每月的天数是不同的,1 3 5 7 8 10 12 有31天,2月闰年29天 平年28天,剩余月份30天
(year % 4 === 0 && year % 100 !== 0 || year % 400 === 0
为闰年)
3.实现步骤
1) 首先我们要考虑的就是这些年月日的初始化数据,我们可以看到当滚动到最下,或者最上时都是留白的所以就需要数据初始话的时候前后都添加空数据比如月份:
month: ['', '', '', 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, '', '', '']
年份初动态初始化为当前年份的上下100年,日暂时初始化为31天
2) 数据的绑定 以月为例
<div class="month" ref="month" @scroll="monthScroll">
<li v-for="(item,index) in month" :key="index" :ref="'item'+index" class="item">
{
{
item ? item + $t('mouth') : item }}
</li>
</div>
data () {
return {
date: [Date.getFullYear, 12, 1],
month: ['', '', '', 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, '', '', ''],
}
},
mounted () {
this.itemHeight = this.$refs.item0