h5网站快速搭建,南昌net网站开发,网站建设与管理和计算机网络技术,抖音代运营协议合同范本免费下载vue横向滚动日期选择器组件
组件使用到了element-plus组件库和dayjs库#xff0c;使用前先保证项目中已经下载导入
主要功能#xff1a;选择日期#xff0c;点击日期可以让此日期滚动到视图中间#xff0c;左滑右滑同理#xff0c;支持跳转至任意日期#xff0c;支持自…vue横向滚动日期选择器组件
组件使用到了element-plus组件库和dayjs库使用前先保证项目中已经下载导入
主要功能选择日期点击日期可以让此日期滚动到视图中间左滑右滑同理支持跳转至任意日期支持自定义滚动日期的数量
组件中用到了other.ts 工具代码other.ts
import dayjs from dayjs
import calendar from dayjs/plugin/calendar
import dayjs/locale/zh-cndayjs.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 )
})function judegSame(dj1: dayjs.Dayjs, dj2: dayjs.Dayjs) {return dj1.isSame(dj2)
}function getRelativeTime(dj: dayjs.Dayjs) {let now 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 后天}let d dj.day()const backArr [日, 一, 二, 三, 四, 五, 六]return 周 backArr[d]
}export { dayjs, getRelativeTime }
组件代码SlideDatePicker.vue
script setup langts
import { ArrowLeft, ArrowRight } from element-plus/icons-vue;
import { dayjs, getRelativeTime } from ./other;// 日期加载总量
const { count } withDefaults(defineProps{count: number
}(), {count: 30
})
const activeIndex ref(0)
const dateItemRefs refHTMLElement[]([])
const dateItmeWrapRef refHTMLElement()
const curDate ref() // 日期选择器 选择的日期const showDateList refRecordstring, any[]([])const emit defineEmits([dateChange])function calc(format?: string) {if (!format) {format dayjs().format(YYYY-MM-DD)}showDateList.value []let beforeCount Math.floor((count 1) / 2) // 上取整let afterCount Math.floor(count / 2)let cur dayjs(dayjs(format).format(YYYY-MM-DD))for (let i 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 (let i 0; i afterCount; i) {cur cur.add(1, day)showDateList.value.push({date: cur.format(YYYYMMDD),dateMd: cur.format(MMDD),week: getRelativeTime(cur)})}
}const getMiddle computed(() {return Math.floor((showDateList.value.length 1) / 2) - 1
})function move(step: number) {// 越界无效if (activeIndex.value step showDateList.value.length || activeIndex.value step 0) {return}activeIndex.value stepdateItmeWrapRef.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)
}function moveToIndex(index: number) {if (index showDateList.value.length || index 0) {return}activeIndex.value indexdateItmeWrapRef.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)
}function datePickerChange(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.valuecurDate.value dayjs().format(YYYY-MM-DD)nextTick(() {dateItmeWrapRef.value?.scrollTo({behavior: instant,left: (dateItemRefs.value[activeIndex.value].offsetLeft - dateItmeWrapRef.value.offsetWidth / 2)})})
})/scripttemplatediv classdate_picker_wrapdiv classleft_iconel-button :iconArrowLeft link clickmove(-1)/el-button/divdiv classdate_item_wrap refdateItmeWrapRefdiv classdate_item :classindex activeIndex ? active : v-for(item, index) in showDateListrefdateItemRefs clickmoveToIndex(index)span{{ item.dateMd }}/spanspan{{ item.week }}/span/div/divdiv classright_iconel-button :iconArrowRight link clickmove(1)/el-button/divdiv classcalendar_iconel-date-picker stylewidth: 126px; v-modelcurDate typedate placeholder选择日期 formatYYYY-MM-DD:clearablefalse changedatePickerChange //div/div
/templatestyle scoped
.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 :count30 dateChangedateChange /function dateChange(value: string) {console.log(选中的日期, value); // 2024-12-19
}效果图
