基於 Vue 和 Element Plus 的時間範圍控制與數據展示詳情 - 時間選擇器,高亮顯示,HTML,Vue.js,前端開發農民工前端博客

本文將重點講解如何在 Vue 項目中使用 Element Plus 的 el-date-picker 組件實現時間範圍選擇，並結合“日”、“月”、“年”按鈕動態控制時間範圍。！🚀

1. 核心功能 🎯

時間範圍選擇：使用 el-date-picker 實現日期範圍選擇。
快速切換：通過“日”、“月”、“年”按鈕快速設置時間範圍。
動態綁定：根據用户選擇動態更新時間範圍。

2. 實現效果 🎨

時間選擇器：用户可以選擇自定義日期範圍。
按鈕切換：點擊“日”、“月”、“年”按鈕，時間選擇器會自動更新為對應範圍。
樣式交互：選中按鈕高亮顯示，提升用户體驗。

3. 代碼實現 🛠️

3.1 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 邏輯：

<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 部分 📝

以下是時間選擇器和按鈕的樣式設計：

<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>