一文带你搞定 Element 年份范围选择器组件

2023-09-22 14:39:28

轻松实现 Element UI DatePicker 组件的年份范围选择

简介

在日常开发中，选择时间范围是常见需求，例如预订机票、酒店或查询数据。Element UI 中的 DatePicker 组件提供了日期和时间选择功能，但还不支持年份范围选择。本文将详细介绍如何通过创建自定义组件和修改 DatePicker 组件属性，轻松实现这一功能。

自定义年份选择器组件

首先，我们需要创建一个自定义的年份选择器组件。该组件将使用 Vue.js 构建：

// YearPicker.vue
<template>
  <div class="year-picker">
    <el-select v-model="selectedYear" placeholder="选择年份">
      <el-option
        v-for="year in years"
        :key="year"
        :label="year"
        :value="year"
      />
    </el-select>
  </div>
</template>

<script>
export default {
  name: "YearPicker",
  props: {
    years: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      selectedYear: null,
    };
  },
  methods: {
    emitYear() {
      this.$emit("select-year", this.selectedYear);
    },
  },
};
</script>

<style>
.year-picker {
  width: 100%;
}
</style>

此组件包含一个下拉列表，列出了可供选择的年份。当用户选择一个年份后，将触发一个 "select-year" 事件，并将选定的年份作为参数传递。

集成到 DatePicker 组件

下一步，将自定义年份选择器组件集成到 Element UI 的 DatePicker 组件中：

// DatePicker.vue
<template>
  <el-date-picker
    v-model="value"
    :picker-options="pickerOptions"
    :shortcuts="shortcuts"
    @change="handleChange"
  >
    <year-picker
      slot="yearpicker"
      :years="years"
      @select-year="handleSelectYear"
    />
  </el-date-picker>
</template>

<script>
import YearPicker from "./YearPicker.vue";

export default {
  name: "DatePicker",
  components: {
    YearPicker,
  },
  props: {
    value: {
      type: [Date, String],
      required: true,
    },
    years: {
      type: Array,
      required: true,
    },
    pickerOptions: {
      type: Object,
      default: () => ({}),
    },
    shortcuts: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      selectedYear: null,
    };
  },
  methods: {
    handleChange(value) {
      this.$emit("input", value);
    },
    handleSelectYear(year) {
      this.selectedYear = year;
      this.$emit("select-year", year);
    },
  },
};
</script>

在 DatePicker 组件中，我们在 "yearpicker" 插槽中添加了自定义年份选择器组件。当用户选择一个年份时，我们将选定的年份存储在 "selectedYear" 数据中，并触发 "select-year" 事件，将年份作为参数传递。

修改 DatePicker 属性

最后，我们需要修改 DatePicker 组件的属性以支持年份范围选择：

// DatePicker.vue
<template>
  <el-date-picker
    v-model="value"
    :picker-options="pickerOptions"
    :shortcuts="shortcuts"
    @change="handleChange"
  >
    <year-picker
      slot="yearpicker"
      :years="years"
      @select-year="handleSelectYear"
    />
  </el-date-picker>
</template>

<script>
import YearPicker from "./YearPicker.vue";

export default {
  name: "DatePicker",
  components: {
    YearPicker,
  },
  props: {
    value: {
      type: [Date, String],
      required: true,
    },
    years: {
      type: Array,
      required: true,
    },
    pickerOptions: {
      type: Object,
      default: () => ({
        disabledDate(date) {
          return date.getFullYear() < this.selectedYear;
        },
      }),
    },
    shortcuts: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      selectedYear: null,
    };
  },
  methods: {
    handleChange(value) {
      this.$emit("input", value);
    },
    handleSelectYear(year) {
      this.selectedYear = year;
      this.$emit("select-year", year);
    },
  },
};
</script>

在 "pickerOptions" 属性中，我们添加了一个 "disabledDate" 函数。此函数将禁用所有年份，这些年份小于选定的 "selectedYear"。这样，用户只能选择大于或等于 "selectedYear" 的年份。

使用示例

现在，我们可以使用我们自定义的年份范围选择器组件了：

<template>
  <div>
    <date-picker :years="years" v-model="value" />
  </div>
</template>

<script>
import DatePicker from "./DatePicker.vue";

export default {
  components: {
    DatePicker,
  },
  data() {
    return {
      value: new Date(),
      years: [2023, 2024, 2025, 2026, 2027],
    };
  },
};
</script>