当前位置：首页 > news >正文

vue3横向滚动日期选择器组件(Element Plus)

news 2026/3/26 18:58:25

vue横向滚动日期选择器组件

组件使用到了element-plus组件库和dayjs库，使用前先保证项目中已经下载导入

主要功能：选择日期，点击日期可以让此日期滚动到视图中间，左滑右滑同理，支持跳转至任意日期，支持自定义滚动日期的数量

组件中用到了other.ts
工具代码other.ts

importdayjsfrom'dayjs'importcalendarfrom'dayjs/plugin/calendar'import'dayjs/locale/zh-cn'dayjs.locale('zh-cn')dayjs.extend(calendar)dayjs().calendar(null,{sameDay:'[Today]',// The same day ( Today at 2:30 AM )nextDay:'[Tomorrow]',// The next day ( Tomorrow at 2:30 AM )nextWeek:'dddd',// The next week ( Sunday at 2:30 AM )lastDay:'[Yesterday]',// The day before ( Yesterday at 2:30 AM )lastWeek:'[Last]',// Last week ( Last Monday at 2:30 AM )sameElse:'DD/MM/YYYY'// Everything else ( 7/10/2011 )})functionjudegSame(dj1:dayjs.Dayjs,dj2:dayjs.Dayjs){returndj1.isSame(dj2)}functiongetRelativeTime(dj:dayjs.Dayjs){letnow=dayjs(dayjs().format('YYYY-MM-DD'))if(judegSame(now,dj)){return'今天'}now=now.add(1,'day')if(judegSame(now,dj)){return'明天'}now=now.add(1,'day')if(judegSame(now,dj)){return'后天'}letd=dj.day()constbackArr=['日','一','二','三','四','五','六']return'周'+backArr[d]}export{dayjs,getRelativeTime}

组件代码SlideDatePicker.vue

<scriptsetuplang="ts">import{ArrowLeft,ArrowRight}from'@element-plus/icons-vue';import{dayjs,getRelativeTime}from'./other';// 日期加载总量const{count}=withDefaults(defineProps<{count:number}>(),{count:30})constactiveIndex=ref(0)constdateItemRefs=ref<HTMLElement[]>([])constdateItmeWrapRef=ref<HTMLElement>()constcurDate=ref('')// 日期选择器 选择的日期constshowDateList=ref<Record<string,any>[]>([])constemit=defineEmits(['dateChange'])functioncalc(format?:string){if(!format){format=dayjs().format('YYYY-MM-DD')}showDateList.value=[]letbeforeCount=Math.floor((count+1)/2)// 上取整letafterCount=Math.floor(count/2)letcur=dayjs(dayjs(format).format('YYYY-MM-DD'))for(leti=0;i<beforeCount;i++){showDateList.value.push({date:cur.format('YYYYMMDD'),dateMd:cur.format('MMDD'),week:getRelativeTime(cur)})cur=cur.subtract(1,'day')}showDateList.value=showDateList.value.reverse()// 反转 让最早的日期排在第一位cur=dayjs(dayjs(format).format('YYYY-MM-DD'))for(leti=0;i<afterCount;i++){cur=cur.add(1,'day')showDateList.value.push({date:cur.format('YYYYMMDD'),dateMd:cur.format('MMDD'),week:getRelativeTime(cur)})}}constgetMiddle=computed(()=>{returnMath.floor((showDateList.value.length+1)/2)-1})functionmove(step:number){// 越界无效if(activeIndex.value+step>=showDateList.value.length||activeIndex.value+step<0){return}activeIndex.value+=step dateItmeWrapRef.value?.scrollTo({behavior:'smooth',left:(dateItemRefs.value[activeIndex.value].offsetLeft-dateItmeWrapRef.value.offsetWidth/2)})curDate.value=dayjs(showDateList.value[activeIndex.value].date,'YYYYMMDD').format('YYYY-MM-DD')emit('dateChange',curDate.value)}functionmoveToIndex(index:number){if(index>=showDateList.value.length||index<0){return}activeIndex.value=index dateItmeWrapRef.value?.scrollTo({behavior:'smooth',left:(dateItemRefs.value[activeIndex.value].offsetLeft-dateItmeWrapRef.value.offsetWidth/2)})curDate.value=dayjs(showDateList.value[activeIndex.value].date,'YYYYMMDD').format('YYYY-MM-DD')emit('dateChange',curDate.value)}functiondatePickerChange(value:string){// 重新计算curDate.value=dayjs(value).format('YYYY-MM-DD')calc(curDate.value)activeIndex.value=getMiddle.valuenextTick(()=>{dateItmeWrapRef.value?.scrollTo({behavior:'instant',left:(dateItemRefs.value[activeIndex.value].offsetLeft-dateItmeWrapRef.value.offsetWidth/2)})})emit('dateChange',curDate.value)}onMounted(()=>{calc()activeIndex.value=getMiddle.value curDate.value=dayjs().format('YYYY-MM-DD')nextTick(()=>{dateItmeWrapRef.value?.scrollTo({behavior:'instant',left:(dateItemRefs.value[activeIndex.value].offsetLeft-dateItmeWrapRef.value.offsetWidth/2)})})})</script><template><divclass="date_picker_wrap"><divclass="left_icon"><el-button:icon="ArrowLeft"link@click="move(-1)"></el-button></div><divclass="date_item_wrap"ref="dateItmeWrapRef"><divclass="date_item":class="index === activeIndex ? 'active' : ''"v-for="(item, index) in showDateList"ref="dateItemRefs"@click="moveToIndex(index)"><span>{{ item.dateMd }}</span><span>{{ item.week }}</span></div></div><divclass="right_icon"><el-button:icon="ArrowRight"link@click="move(1)"></el-button></div><divclass="calendar_icon"><el-date-pickerstyle="width:126px;"v-model="curDate"type="date"placeholder="选择日期"format="YYYY-MM-DD":clearable="false"@change="datePickerChange"/></div></div></template><stylescoped>.date_picker_wrap{background:#fff;width:100%;height:52px;border-radius:6px;padding:4px 8px;display:flex;align-items:center;font-size:14px;color:#4b5563;.date_item_wrap{width:100%;display:flex;flex:1;overflow:hidden;.active{color:#3c6cfe;}.date_item{padding:0 6px;width:96px;height:100%;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-left:solid 1px #e5e7eb;border-right:solid 1px #e5e7eb;cursor:pointer;&:hover{color:#3c6cfe;}span{padding:0 2px;}}}.left_icon, .right_icon, .calendar_icon{padding:0 8px;}}</style>

使用方式

传入count 30，组件初始化横向滚动日期数为30个，初始化数量不要太少，最好占满宽度，让其可以滚动。

<SlideDatePicker:count="30"@dateChange="dateChange"/>

functiondateChange(value:string){console.log('选中的日期',value);// 2024-12-19}

效果图

2025-07-23 测试发现如果这个组件的父div不是靠左的位置，选择到的日期无法居中，甚至会出现在视图外的情况，修正后代码如下，template和style不变

<script setup lang="ts">import{ArrowLeft,ArrowRight}from"@element-plus/icons-vue";import{dayjs,getRelativeTime}from"@/utils/index";// 日期加载总量const{count}=withDefaults(defineProps<{count:number;}>(),{count:30});constactiveIndex=ref(0);constdateItemRefs=ref<HTMLElement[]>([]);constdateItmeWrapRef=ref<HTMLElement>();constcurDate=ref("");// 日期选择器 选择的日期constshowDateList=ref<Record<string,any>[]>([]);constemit=defineEmits(["dateChange"]);functioncalc(format?:string){if(!format){format=dayjs().format("YYYY-MM-DD");}showDateList.value=[];letbeforeCount=Math.floor((count+1)/2);// 上取整letafterCount=Math.floor(count/2);letcur=dayjs(dayjs(format).format("YYYY-MM-DD"));for(leti=0;i<beforeCount;i++){showDateList.value.push({date:cur.format("YYYYMMDD"),dateMd:cur.format("MMDD"),week:getRelativeTime(cur)});cur=cur.subtract(1,"day");}showDateList.value=showDateList.value.reverse();// 反转 让最早的日期排在第一位cur=dayjs(dayjs(format).format("YYYY-MM-DD"));for(leti=0;i<afterCount;i++){cur=cur.add(1,"day");showDateList.value.push({date:cur.format("YYYYMMDD"),dateMd:cur.format("MMDD"),week:getRelativeTime(cur)});}}constgetMiddle=computed(()=>{returnMath.floor((showDateList.value.length+1)/2)-1;});functionmove(step:number){// 越界无效if(activeIndex.value+step>=showDateList.value.length||activeIndex.value+step<0){return;}activeIndex.value+=step;scrollIntoView("smooth");curDate.value=dayjs(showDateList.value[activeIndex.value].date,"YYYYMMDD").format("YYYY-MM-DD");emit("dateChange",curDate.value);}functionmoveToIndex(index:number){if(index>=showDateList.value.length||index<0){return;}activeIndex.value=index;scrollIntoView("smooth");curDate.value=dayjs(showDateList.value[activeIndex.value].date,"YYYYMMDD").format("YYYY-MM-DD");emit("dateChange",curDate.value);}functiondatePickerChange(value:string){// 重新计算curDate.value=dayjs(value).format("YYYY-MM-DD");calc(curDate.value);activeIndex.value=getMiddle.value;scrollIntoView();emit("dateChange",curDate.value);}functionscrollIntoView(behavior:ScrollBehavior="instant"){nextTick(()=>{dateItmeWrapRef.value?.scrollTo({behavior,left:dateItemRefs.value[activeIndex.value].offsetLeft-dateItmeWrapRef.value.offsetWidth/2-dateItmeWrapRef.value.offsetLeft// 如果这个组件放的div不在最靠左位置，可能出现偏差，减去当前div的偏移});});}onMounted(()=>{calc();activeIndex.value=getMiddle.value;curDate.value=dayjs().format("YYYY-MM-DD");scrollIntoView();});</script>