基于 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 Plus 的 el-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 效果：鼠标悬停时改变背景色。

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

您好，我是肥晨。

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