用 van-picker 组件打造 DatetimePicker 组件的年选择功能

2023-12-04 06:31:22

前言
在前端开发中，我们经常需要使用日期和时间选择器组件来帮助用户选择特定的日期和时间。Vant 组件库提供了一个功能强大的 DatetimePicker 时间选择组件，支持选择年月日，以及选择年月。如果您有单独选择年份的需求，可以使用 van-picker 组件轻松实现。

实现步骤

安装 van-picker 组件

首先，您需要在您的项目中安装 van-picker 组件。您可以通过以下命令进行安装：

npm install van-picker

创建自定义年份选择器

接下来，您需要创建一个自定义的年份选择器组件。您可以使用 Vue.js 的 template 和 script 标签来创建组件。在 template 标签中，您可以定义组件的 HTML 结构，在 script 标签中，您可以定义组件的逻辑和方法。

<template>
  <div class="van-picker-year">
    <div class="van-picker-year__header">
      <button @click="prevYear">上一年</button>
      <button @click="nextYear">下一年</button>
    </div>
    <ul class="van-picker-year__list">
      <li v-for="year in years" @click="selectYear(year)">{{ year }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'VanPickerYear',
  props: {
    value: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      years: []
    }
  },
  computed: {
    startYear() {
      return this.value - 10
    },
    endYear() {
      return this.value + 10
    }
  },
  created() {
    this.generateYears()
  },
  methods: {
    prevYear() {
      this.$emit('input', this.value - 1)
    },
    nextYear() {
      this.$emit('input', this.value + 1)
    },
    selectYear(year) {
      this.$emit('input', year)
    },
    generateYears() {
      this.years = []
      for (let i = this.startYear; i <= this.endYear; i++) {
        this.years.push(i)
      }
    }
  }
}
</script>

集成到 DatetimePicker 组件

现在，您可以将自定义的年份选择器组件集成到 DatetimePicker 组件中。在 DatetimePicker 组件的 template 标签中，您可以在需要显示年份选择器的地方添加 <van-picker-year> 组件。

<template>
  <div class="van-datetime-picker">
    <van-picker-year v-model="year" />
    <van-picker-month v-model="month" />
    <van-picker-day v-model="day" />
  </div>
</template>

设置初始值

最后，您需要设置 DatetimePicker 组件的初始值。您可以通过 v-model 指令来设置组件的初始值。

<script>
export default {
  data() {
    return {
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1,
      day: new Date().getDate()
    }
  }
}
</script>