vue横向滚动日期选择器组件
vue横向滚动日期选择器组件
组件使用到了element-plus组件库和dayjs库,使用前先保证项目中已经下载导入
主要功能:选择日期,点击日期可以让此日期滚动到视图中间,左滑右滑同理,支持跳转至任意日期,支持自定义滚动日期的数量
组件中用到了other.ts
工具代码other.ts
import dayjs from 'dayjs'
import calendar from '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 )
})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 lang="ts">
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 = ref<HTMLElement[]>([])
const dateItmeWrapRef = ref<HTMLElement>()
const curDate = ref('') // 日期选择器 选择的日期const showDateList = ref<Record<string, 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)})})
})</script><template><div class="date_picker_wrap"><div class="left_icon"><el-button :icon="ArrowLeft" link @click="move(-1)"></el-button></div><div class="date_item_wrap" ref="dateItmeWrapRef"><div class="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><div class="right_icon"><el-button :icon="ArrowRight" link @click="move(1)"></el-button></div><div class="calendar_icon"><el-date-picker style="width: 126px;" v-model="curDate" type="date" placeholder="选择日期" format="YYYY-MM-DD":clearable="false" @change="datePickerChange" /></div></div>
</template><style 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 :count="30" @dateChange="dateChange" />
function dateChange(value: string) {console.log('选中的日期', value); // 2024-12-19
}
效果图

相关文章:
vue横向滚动日期选择器组件
vue横向滚动日期选择器组件 组件使用到了element-plus组件库和dayjs库,使用前先保证项目中已经下载导入 主要功能:选择日期,点击日期可以让此日期滚动到视图中间,左滑右滑同理,支持跳转至任意日期,支持自…...
【大模型】大模型项目选择 RAGvs微调?
RAG 输入问题,在知识库匹配知识,构建提示词:基于{知识}回答{问题} 微调 用知识问答对重新训练大模型权重,输入问题到调整后的大模型 如何选择 如果业务要求较高,RAG和微调可以一起使用 1-动态数据 选择RAG 原因&a…...
2024年12月CCF-GESP编程能力等级认证Python编程一级真题解析
本文收录于专栏《Python等级认证CCF-GESP真题解析》,专栏总目录:点这里,订阅后可阅读专栏内所有文章。 一、单选题(每题 2 分,共 30 分) 第 1 题 2024年10月8日,诺贝尔物理学奖“意外地”颁给了两位计算机科学家约翰霍普菲尔德(John J. Hopfield)和杰弗里辛顿(Geof…...
【机器学习】元学习(Meta-learning)
云边有个稻草人-CSDN博客 目录 引言 一、元学习的基本概念 1.1 什么是元学习? 1.2 元学习的与少样本学习的关系 二、元学习的核心问题与挑战 2.1 核心问题 2.2 挑战 三、元学习的常见方法 3.1 基于优化的元学习 3.1.1 MAML(Model-Agnostic Meta…...
详解Redis的String类型及相关命令
目录 SET GET MGET MSET SETNX SET和SETNX和SETXX对比 INCR INCRBY DECR DECRBY INCRBYFLOAT APPEND GETRANGE SETRANGE STRLEN 内部编码 SET 将 string 类型的 value 设置到 key 中。如果 key 之前存在,则覆盖,⽆论原来的数据类型是什么…...
android RadioButton + ViewPager+fragment
RadioGroup viewpage fragment 组合显示导航栏 1、首先主界面的布局控件就是RadioGroup viewpage <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools…...
给机器装上“脑子”—— 一文带你玩转机器学习
目录 一、引言:AI浪潮中的明星——机器学习 二、机器学习的定义与概念 1. 机器学习与传统编程的区别 2. 机器学习的主要任务类型 3. 机器学习的重要组成部分 三、机器学习的工作原理:从数据到模型的魔法之旅 1. 数据收集与预处理——数据是机器的…...
论文笔记:是什么让多模态学习变得困难?
整理了What Makes Training Multi-modal Classification Networks Hard? 论文的阅读笔记 背景方法OGR基于最小化OGR的多监督信号混合在实践中的应用 实验 背景 直观上,多模态网络接收更多的信息,因此它应该匹配或优于其单峰网络。然而,最好的…...
ChatGPT Search开放:实时多模态搜索新体验
点击访问 chatTools 免费体验GPT最新模型,包括o1推理模型、GPT4o、Claude、Gemini等模型! ChatGPT Search:功能亮点解析 本次更新的ChatGPT Search带来了多项令人瞩目的功能,使其在搜索引擎市场中更具竞争力。 1. 高级语音模式&…...
Centos7.9 离线安装docker
实验环境: [root192 ~]# cat /etc/system-release CentOS Linux release 7.9.2009 (Core)下载二进制压缩包 a. 官网下载地址: https://download.docker.com/linux/static/stable/x86_64/b. 阿里云下载地址 https://mirrors.aliyun.com/docker-ce/lin…...
C语言函数在调用过程中具体是怎么和栈互动的?
从栈开始的一场C语言探险记 —— C语言函数是如何与栈"共舞"的。 栈的舞步解析 通过一个简单的例子来看看这支"舞蹈": int add(int a, int b) {int result a b;return result; }int main() {int x 10;int y 20;int sum add(x, y);retur…...
【Java中常见的异常及其处理方式】
🌈个人主页: Aileen_0v0 🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 💫个人格言:“没有罗马,那就自己创造罗马~” 文章目录 字符串修改的实现——StringBuilder和StringBuffer异常常见异常①算数异常②数组越界异常③空指针异…...
如何更新项目中的 npm 或 Yarn 依赖包至最新版本
要升级 package.json 文件中列出的包,你可以使用 npm(Node Package Manager)或 yarn。以下是两种工具的命令来更新你的依赖项: 使用 npm 更新所有包到最新版本 npm update如果你想将所有依赖项更新到其各自最新的大版本…...
SpringBoot3整合FastJSON2如何配置configureMessageConverters
在 Spring Boot 3 中整合 FastJSON 2 主要涉及到以下几个步骤,包括添加依赖、配置 FastJSON 作为 JSON 处理器等。下面是详细的步骤: 1. 添加依赖 首先,你需要在你的 pom.xml 文件中添加 FastJSON 2 的依赖。以下是 Maven 依赖的示例&#…...
《Vue3实战教程》2:Vue3快速上手
如果您有疑问,请观看视频教程《Vue3实战教程》 快速上手 线上尝试 Vue 想要快速体验 Vue,你可以直接试试我们的演练场。 如果你更喜欢不用任何构建的原始 HTML,可以使用 JSFiddle 入门。 如果你已经比较熟悉 Node.js 和构建工具等概念…...
ubuntu 24.04.1安装FTP流程
1、安装vsftpd: sudo apt update sudo apt install vsftpd 2、安装后重启查看vsftpd状态 sudo systemctl status vsftpd 输出如下所示,表明vsftpd服务处于活动状态并正在运行: * vsftpd.service - vsftpd FTP server Loaded: loaded (/…...
多功能护照阅读器港澳通行证阅读机RS232串口主动输出协议,支持和单片机/Linux对接使用
此护照阅读器支持护照、电子芯片护照、港澳通行证、台湾通行证,和串口的被动的方式不一样。此护照阅读器通电后,自动读卡,串口输出,软件只需要去串口监听数据即可,例如用串口助手就可以收到读卡信息。 非常适用于单片…...
5个用于构建Web应用程序的Go Web框架
探索高效Web开发的顶级Go框架 Go(或称为Golang)以其简洁性、高效性和出色的标准库而闻名。然而,有几个流行的Go Web框架和库为构建Web应用程序提供了额外的功能。以下是五个最值得注意的Go框架: 1. Gin: Gin是一个高…...
Qt中的异步相关类
Qt中的异步相关类 今天在学习别人的项目时,看到别人包含了QFuture类,我没有见过,于是记录一下。 直接在AI助手中搜索QFuture,得到的时Qt中异步相关的类。于是直接查询一下Qt异步中相关的类。 在Qt中,异步编程是一个重要的概念&…...
浅谈仓颉语言的优劣
仓颉语言,作为华为自研的新一代编程语言,以其高效、安全、现代化的特点,引起了广泛的关注。 仓颉语言的优势 高效并发 仓颉语言的一大亮点是其轻松并发的能力。它实现了轻量化用户态线程和并发对象库,使得高效并发变得轻松。仓颉…...
QMC5883L的驱动
简介 本篇文章的代码已经上传到了github上面,开源代码 作为一个电子罗盘模块,我们可以通过I2C从中获取偏航角yaw,相对于六轴陀螺仪的yaw,qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...
条件运算符
C中的三目运算符(也称条件运算符,英文:ternary operator)是一种简洁的条件选择语句,语法如下: 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true,则整个表达式的结果为“表达式1”…...
【机器视觉】单目测距——运动结构恢复
ps:图是随便找的,为了凑个封面 前言 在前面对光流法进行进一步改进,希望将2D光流推广至3D场景流时,发现2D转3D过程中存在尺度歧义问题,需要补全摄像头拍摄图像中缺失的深度信息,否则解空间不收敛…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现,这取决于你是想在组件内部直接设置,还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法: 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡(如 HAProxy、AWS NLB、阿里 SLB)发起上游连接时,将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后,ngx_stream_realip_module 从中提取原始信息…...
微信小程序 - 手机震动
一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注:文档 https://developers.weixin.qq…...
JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案
JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停 1. 安全点(Safepoint)阻塞 现象:JVM暂停但无GC日志,日志显示No GCs detected。原因:JVM等待所有线程进入安全点(如…...
Linux离线(zip方式)安装docker
目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1:修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本:CentOS 7 64位 内核版本:3.10.0 相关命令: uname -rcat /etc/os-rele…...
android13 app的触摸问题定位分析流程
一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...
BLEU评分:机器翻译质量评估的黄金标准
BLEU评分:机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域,衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标,自2002年由IBM的Kishore Papineni等人提出以来,…...
