Vue3横向滚动日期选择器组件开发实战(Element Plus + Day.js)

最新推荐文章于 2026-05-04 09:13:07 发布

原创

最新推荐文章于 2026-05-04 09:13:07 发布 · 686 阅读

1. 为什么我们需要一个横向滚动的日期选择器？

在开发后台管理系统、日程应用或者任何需要频繁选择日期的界面时，一个直观、高效的日期选择器至关重要。Element Plus 自带的日期选择器功能强大，但在某些高频操作场景下，比如需要快速浏览和选择未来一周、一个月内的日期时，传统的弹窗式选择器就显得有些“重”了。每次点击、弹窗、选择、关闭，操作路径很长。

这时候，一个横向滚动、平铺在页面上的日期选择器就派上用场了。你可以把它想象成一个可视化的时间轴，所有日期一目了然，通过简单的左右滑动或点击箭头就能快速切换，选中的日期还能自动滚动到视图中央，体验非常流畅。我在好几个需要快速切换日期的项目里都用了类似的组件，用户反馈都说比传统的方式快多了。

今天，我就手把手带你用 Vue 3、Element Plus 和 Day.js，从零开始打造一个功能完善的横向滚动日期选择器组件。这个组件不仅支持滑动和点击切换，还能跳转到任意日期，并且可以自定义显示多少个日期。我会把开发过程中的核心逻辑、我踩过的坑以及优化技巧都分享出来，保证你跟着做一遍就能在自己的项目里用起来。

2. 环境搭建与核心依赖

2.1 创建项目与安装依赖

首先，确保你已经有一个 Vue 3 项目。如果你还没有，用 Vite 快速创建一个是最佳选择，速度飞快。打开终端，执行：

npm create vue@latest my-horizontal-date-picker

按照提示选择项目配置，记得把 Vue Router 和 Pinia 先去掉，我们暂时用不到，保持项目简洁。创建完成后，进入项目目录，安装我们需要的两个核心库：Element Plus 和 Day.js。

cd my-horizontal-date-picker
npm install element-plus dayjs
npm install -D @element-plus/icons-vue

这里解释一下，element-plus 是我们的 UI 基础，提供按钮、日期选择器等现成组件和样式。dayjs 是一个轻量级的时间处理库，比原生的 Date 对象好用太多，API 友好且体积小。@element-plus/icons-vue 则是 Element Plus 的图标库，我们需要用到里面的左右箭头图标。

安装完成后，我们需要在项目中全局引入 Element Plus。修改 main.js 或 main.ts 文件：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

2.2 准备日期处理工具函数

在开始写组件之前，我们先封装一个日期处理的工具文件。这样做的好处是逻辑清晰，以后日期相关的辅助函数都可以放在这里。在 src/utils 目录下（如果没有就创建一个），新建一个 dateHelper.js 文件（如果用 TypeScript 就是 dateHelper.ts）。

这个工具文件主要做三件事：

配置 Day.js 使用中文语言和日历插件。
提供一个函数，判断给定日期是“今天”、“明天”、“后天”还是星期几。
统一导出配置好的 Day.js 实例和这个函数。

// src/utils/dateHelper.js
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import calendar from 'dayjs/plugin/calendar'

// 使用中文 locale
dayjs.locale('zh-cn')
// 扩展 calendar 插件，用于更人性化的日期显示
dayjs.extend(calendar)

/**
 * 获取日期的相对时间描述（今天、明天、后天、星期X）
 * @param {dayjs.Dayjs} targetDate - 目标日期
 * @returns {string} 描述字符串
 */
export function getRelativeTime(targetDate) {
  const today = dayjs().startOf('day') // 获取今天的开始时间
  const targetDay = targetDate.startOf('day')

  if (targetDay.isSame(today)) {
    return '今天'
  }
  if (targetDay.isSame(today.add(1, 'day'))) {
    return '明天'
  }
  if (targetDay.isSame(today.add(2, 'day'))) {
    return '后天'
  }

  // 其他情况返回星期几
  const weekdays = ['日', '一', '二', '三', '四', '五', '六']
  return `周${weekdays[targetDate.day()]}`
}

// 导出配置好的 dayjs
export { dayjs }

这里有个小细节：dayjs().startOf('day') 是为了精确比较“天”，忽略时、分、秒的差异。getRelativeTime 函数是我们组件的灵魂之一，它让日期显示不再是冷冰冰的“12-01”，而是更有温度的“今天”、“明天”或“周二”，用户体验直接提升一个档次。