vue3组合式实现一个纵向滚动日期选择器组件

好的，我可以为您提供一个使用 Vue 3 组合式 API 实现的纵向滚动日期选择器组件。

首先，您需要安装以下依赖项：

npm install dayjs -S

接下来，您可以创建一个名为 `useDatePicker` 的组合式 API，代码如下：

import { ref, computed } from 'vue';
import dayjs from 'dayjs';

export default function useDatePicker(initialValue) {
  const currentDate = ref(dayjs(initialValue));
  const selectedDate = ref(currentDate.value.toDate());

  const months = computed(() => {
    const result = [];

    let month = currentDate.value.startOf('year');
    while (month.isBefore(currentDate.value.endOf('year'))) {
      result.push(month.format('MMMM YYYY'));
      month = month.add(1, 'month');
    }

    return result;
  });

  const days = computed(() => {
    const firstDay = currentDate.value.startOf('month').startOf('week');
    const lastDay = currentDate.value.endOf('month').endOf('week');
    const days = [];

    let day = firstDay;
    while (day.isBefore(lastDay)) {
      days.push(day.format('D'));
      day = day.add(1, 'day');
    }

    return days.reduce((acc, day) => {
      const week = Math.floor(acc.length / 7);
      if (!acc[week]) {
        acc[week] = [];
      }
      acc[week].push(day);
      return acc;
    }, []);
  });

  function selectDate(day) {
    const newDate = currentDate.value.date(day);
    selectedDate.value = newDate.toDate();
  }

  function previousMonth() {
    currentDate.value = currentDate.value.subtract(1, 'month');
  }

  function nextMonth() {
    currentDate.value = currentDate.value.add(1, 'month');
  }

  return {
    currentDate,
    selectedDate,
    months,
    days,
    selectDate,
    previousMonth,
    nextMonth,
  };
}

然后，您可以创建一个名为 `DatePicker.vue` 的组件来使用 `useDatePicker` 组合式 API，代码如下：

<template>
  <div class="date-picker">
    <div class="picker-header">
      <button @click="previousMonth">&lt;</button>
      <span class="picker-title">{{ currentMonth }}</span>
      <button @click="nextMonth">&gt;</button>
    </div>
    <div class="picker-body">
      <div class="picker-column" v-for="(week, index) in days" :key="index">
        <div class="picker-cell" v-for="day in week" :key="day" :class="{ 'is-today': isToday(day), 'is-selected': isSelected(day) }" @click="selectDate(day)">
          {{ day }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import useDatePicker from './useDatePicker';

export default {
  name: 'DatePicker',

  props: {
    value: {
      type: Date,
      required: true,
    },
  },

  setup(props, { emit }) {
    const { currentDate, selectedDate, months, days, selectDate, previousMonth, nextMonth } = useDatePicker(props.value);

    return {
      currentDate,
      selectedDate,
      months,
      days,
      selectDate,
      previousMonth,
      nextMonth,
    };
  },

  computed: {
    currentMonth() {
      return this.currentDate.value.format('MMMM YYYY');
    },
  },

  methods: {
    isToday(day) {
      return dayjs().isSame(this.currentDate.value.date(day));
    },

    isSelected(day) {
      return this.selectedDate.value && this.currentDate.value.date(day).isSame(this.selectedDate.value, 'day');
    },
  },
};
</script>

<style scoped>
.date-picker {
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px;
  font-size: 14px;
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.picker-title {
  font-weight: bold;
}

.picker-body {
  display: flex;
  overflow-x: auto;
  height: 200px;
}

.picker-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.picker-cell {
  flex: 1;
  text-align: center;
  cursor: pointer;
}

.is-today {
  font-weight: bold;
}

.is-selected {
  background-color: #ccc;
}
</style>

在您的应用程序中使用此组件时，您可以使用 `v-model` 指令来双向绑定选定的日期值，如下所示：

<template>
  <div>
    <date-picker v-model="selectedDate"></date-picker>
    <p>You selected: {{ selectedDate }}</p>
  </div>
</template>

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

export default {
  components: {
    DatePicker,
  },

  data() {
    return {
      selectedDate: new Date(),
    };
  },
};
</script>

这个日期选择器组件会显示当前年份中每个月份的日历，并且允许您通过向上或向下滚动来选择不同的月份。当您选择日期时，它将更新选定的日期值，并将其传递回父组件。