基于 Vue 和 Element Plus 的时间范围控制与数据展示

文章目录

      • [1. 核心功能 🎯](#1. 核心功能 🎯)
      • [2. 实现效果 🎨](#2. 实现效果 🎨)
      • [3. 代码实现 🛠️](#3. 代码实现 🛠️)
        • [3.1 HTML 部分 📝](#3.1 HTML 部分 📝)
        • [3.2 JavaScript 部分 📝](#3.2 JavaScript 部分 📝)
        • [3.3 CSS 部分 📝](#3.3 CSS 部分 📝)

本文将重点讲解如何在 Vue 项目中使用 Element Plusel-date-picker 组件实现时间范围选择,并结合"日"、"月"、"年"按钮动态控制时间范围。!🚀


1. 核心功能 🎯

  • 时间范围选择 :使用 el-date-picker 实现日期范围选择。
  • 快速切换:通过"日"、"月"、"年"按钮快速设置时间范围。
  • 动态绑定:根据用户选择动态更新时间范围。

2. 实现效果 🎨

  • 时间选择器:用户可以选择自定义日期范围。
  • 按钮切换:点击"日"、"月"、"年"按钮,时间选择器会自动更新为对应范围。
  • 样式交互 :选中按钮高亮显示,提升用户体验。

3. 代码实现 🛠️

3.1 HTML 部分 📝

以下是时间选择器及相关按钮的 HTML 结构:

html 复制代码
<template>
  <div class="dataPanel-energyManagement-title-right">
    <!-- 时间选择器 -->
    <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="-"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      :size="size"
    />
    <!-- 时间范围按钮 -->
    <div
      class="picker-but"
      :class="{ active: selectedTimeRange === 'day' }"
      @click="selectTimeRange('day')"
    >
      日
    </div>
    <div
      class="picker-but"
      :class="{ active: selectedTimeRange === 'month' }"
      @click="selectTimeRange('month')"
    >
      月
    </div>
    <div
      class="picker-but"
      :class="{ active: selectedTimeRange === 'year' }"
      @click="selectTimeRange('year')"
    >
      年
    </div>
  </div>
</template>
  • el-date-picker :用于选择日期范围,v-model 绑定到 value1
  • picker-but :三个按钮分别对应"日"、"月"、"年",点击后调用 selectTimeRange 方法。

3.2 JavaScript 部分 📝

以下是时间范围控制的 JavaScript 逻辑:

javascript 复制代码
<script>
export default {
  data() {
    return {
      value1: [], // 绑定日期范围
      selectedTimeRange: 'day', // 当前选择的时间范围
      size: 'default', // 组件大小
    };
  },
  methods: {
    // 根据选择的时间范围设置日期
    selectTimeRange(range) {
      this.selectedTimeRange = range;
      const now = new Date();

      switch (range) {
        case 'day': // 选择"日"
          this.value1 = [new Date(now), new Date(now)];
          break;
        case 'month': // 选择"月"
          const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
          const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
          this.value1 = [startOfMonth, endOfMonth];
          break;
        case 'year': // 选择"年"
          const startOfYear = new Date(now.getFullYear(), 0, 1);
          const endOfYear = new Date(now.getFullYear(), 11, 31);
          this.value1 = [startOfYear, endOfYear];
          break;
        default:
          this.value1 = [];
      }
    },
  },
  mounted() {
    // 默认选择"日"范围
    this.selectTimeRange('day');
  },
};
</script>
  • value1 :绑定到 el-date-picker 的日期范围。
  • selectTimeRange 方法 :根据用户选择的"日"、"月"、"年"动态设置日期范围。
    • 日范围:设置为当天。
    • 月范围:设置为当前月的第一天和最后一天。
    • 年范围:设置为当前年的第一天和最后一天。
  • mounted 钩子:默认加载"日"范围。

3.3 CSS 部分 📝

以下是时间选择器和按钮的样式设计:

css 复制代码
<style scoped>
.dataPanel-energyManagement-title-right {
  display: flex;
  align-items: center;
}

.picker-but {
  margin-left: 10px;
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  color: #000;
  text-align: center;
  line-height: 32px;
}

.picker-but:hover {
  background-color: #ecf5ff;
}

.picker-but.active {
  background-color: #409eff;
  color: white;
  border-color: #409eff;
}
</style>
  • picker-but:按钮的基础样式。
  • active:高亮显示当前选中的按钮。
  • hover 效果:鼠标悬停时改变背景色。

小提示💡:如果你觉得按钮样式不够酷炫,可以尝试添加动画效果或图标,让界面更生动哦!🎉

您好,我是肥晨。

欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

相关推荐
gnip5 分钟前
闭包实现一个简单Vue3的状态管理
前端·javascript
斐济岛上有一只斐济10 分钟前
后端程序员的CSS复习
前端
Enddme13 分钟前
《面试必问!JavaScript 中this 全方位避坑指南 (含高频题解析)》
前端·javascript·面试
有梦想的程序员14 分钟前
微信小程序使用 Tailwind CSS version 3
前端
wocwin25 分钟前
Vue移动端项目二次封装原生table组件,支持表头/数据动态配置(支持多级表头、排序);作用域插槽、render函数渲染某列数据等功能
vue.js
溟洵37 分钟前
Qt 窗口 工具栏QToolBar、状态栏StatusBar
开发语言·前端·数据库·c++·后端·qt
用户25191624271142 分钟前
Canvas之图像合成
前端·javascript·canvas
每天开心43 分钟前
噜噜旅游App(4)——构建旅游智能客服模块,实现AI聊天
前端·微信小程序·前端框架
超凌43 分钟前
el-input-number出现的点击+-按钮频现不生效
前端
NicolasCage44 分钟前
Icon图标库推荐
vue.js·react.js·icon