手写滚动日期选择器vue

可以使用Vue.js和CSS来手写滚动日期选择器。下面是一个简单的代码示例：

<template>
  <div class="date-picker">
    <div class="date-picker-scroll">
      <div class="date-picker-item" v-for="(item, index) in years" :key="index">{{ item }}</div>
    </div>
    <div class="date-picker-scroll">
      <div class="date-picker-item" v-for="(item, index) in months" :key="index">{{ item }}</div>
    </div>
    <div class="date-picker-scroll">
      <div class="date-picker-item" v-for="(item, index) in days" :key="index">{{ item }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      years: [],
      months: [],
      days: []
    }
  },
  mounted() {
    // 初始化年份
    let currentYear = new Date().getFullYear();
    for (let i = currentYear - 100; i <= currentYear; i++) {
      this.years.push(i);
    }

    // 初始化月份
    for (let i = 1; i <= 12; i++) {
      this.months.push(i);
    }

    // 初始化日期
    this.updateDays(currentYear, 1);
  },
  methods: {
    updateDays(year, month) {
      let daysInMonth = new Date(year, month, 0).getDate();
      this.days = [];
      for (let i = 1; i <= daysInMonth; i++) {
        this.days.push(i);
      }
    }
  },
  watch: {
    // 监听年份和月份的变化，更新日期
    years: function (val) {
      this.updateDays(val, this.months[0]);
    },
    months: function (val) {
      this.updateDays(this.years[0], val);
    }
  }
}
</script>

<style>
.date-picker {
  display: flex;
  justify-content: center;
  align-items: center;
}

.date-picker-scroll {
  height: 100px;
  width: 50px;
  overflow-y: scroll;
  border: 1px solid gray;
  margin: 0 10px;
}

.date-picker-item {
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 20px;
}

</style>

这个日期选择器将年份、月份和日期分别放在三个滚动框中，用户可以通过滚动来选择日期。在`mounted`生命周期钩子中，我们初始化了年份、月份和日期。当年份或月份改变时，我们使用`watch`来监听它们的变化并更新日期。最后，使用CSS来设置样式，使其看起来像一个日期选择器。