vue实现日历效果

Vue实现日历效果的方法

使用第三方库

Vue生态中有多个成熟的日历组件库，如v-calendar或vue2-calendar，可以快速实现日历功能。安装后直接引入组件即可使用。

npm install v-calendar

<template>
  <v-calendar :attributes="attributes" />
</template>

<script>
import VCalendar from 'v-calendar';

export default {
  components: {
    VCalendar
  },
  data() {
    return {
      attributes: [
        {
          key: 'today',
          highlight: true,
          dates: new Date()
        }
      ]
    };
  }
};
</script>

自定义日历组件

手动实现日历需要计算月份天数、星期分布等逻辑。创建一个Calendar.vue组件，通过计算属性生成日历数据。

<template>
  <div class="calendar">
    <div class="header">{{ currentMonth }}</div>
    <div class="days">
      <div v-for="day in dayNames" :key="day">{{ day }}</div>
    </div>
    <div class="dates">
      <div v-for="date in dates" :key="date.date" :class="{ 'other-month': !date.isCurrentMonth }">
        {{ date.day }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date(),
      dayNames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    };
  },
  computed: {
    currentMonth() {
      return this.currentDate.toLocaleString('default', { month: 'long', year: 'numeric' });
    },
    dates() {
      const year = this.currentDate.getFullYear();
      const month = this.currentDate.getMonth();
      const firstDay = new Date(year, month, 1);
      const lastDay = new Date(year, month + 1, 0);
      const daysInMonth = lastDay.getDate();
      const startDay = firstDay.getDay();

      let dates = [];
      for (let i = 0; i < startDay; i++) {
        dates.push({ day: '', isCurrentMonth: false });
      }
      for (let i = 1; i <= daysInMonth; i++) {
        dates.push({ day: i, isCurrentMonth: true, date: new Date(year, month, i) });
      }
      return dates;
    }
  }
};
</script>

添加交互功能

为日历添加月份切换和日期选择功能，通过方法更新currentDate。

methods: {
  prevMonth() {
    this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() - 1, 1);
  },
  nextMonth() {
    this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 1);
  },
  selectDate(date) {
    this.selectedDate = date;
  }
}

样式优化

使用CSS Grid布局日历，确保日期排列整齐。添加悬停和选中状态提升用户体验。

.calendar {
  display: grid;
  grid-template-rows: auto auto 1fr;
  width: 300px;
}

.days, .dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.dates div {
  padding: 8px;
  text-align: center;
  cursor: pointer;
}

.dates div:hover {
  background-color: #f0f0f0;
}

.other-month {
  opacity: 0.5;
}

通过以上方法，可以灵活实现基础日历功能。第三方库适合快速集成，自定义组件则提供更高自由度。根据项目需求选择合适方案，通过计算属性和方法处理日历逻辑，结合CSS完成布局和交互效果。