vue实现周界面

Vue实现周界面的方法

使用第三方库（如vue-cal）

安装vue-cal库：

npm install vue-cal --save

在组件中引入并使用：

<template>
  <vue-cal
    :time="false"
    :disable-views="['years', 'day']"
    active-view="week"
  />
</template>

<script>
import VueCal from 'vue-cal'
import 'vue-cal/dist/vuecal.css'

export default {
  components: { VueCal }
}
</script>

手动实现基础周视图

创建日期计算工具方法：

// utils/date.js
export const getWeekDays = (date = new Date()) => {
  const day = date.getDay()
  const diff = date.getDate() - day + (day === 0 ? -6 : 1)
  return Array(7).fill(0).map((_, i) => {
    const d = new Date(date)
    d.setDate(diff + i)
    return d
  })
}

组件实现：

<template>
  <div class="week-view">
    <div class="week-header">
      <div v-for="day in weekDays" :key="day">
        {{ day.toLocaleDateString('en-US', { weekday: 'short' }) }}
      </div>
    </div>
    <div class="week-body">
      <div v-for="day in weekDays" :key="day.getTime()" class="day-cell">
        {{ day.getDate() }}
      </div>
    </div>
  </div>
</template>

<script>
import { getWeekDays } from '@/utils/date'

export default {
  data() {
    return {
      weekDays: getWeekDays()
    }
  }
}
</script>

<style>
.week-view {
  display: grid;
  grid-template-rows: auto 1fr;
}
.week-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.week-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.day-cell {
  min-height: 100px;
  border: 1px solid #eee;
}
</style>

增强周视图功能

添加导航控制：

<template>
  <div>
    <button @click="prevWeek">Previous</button>
    <span>{{ currentWeekRange }}</span>
    <button @click="nextWeek">Next</button>

    <div class="week-view">
      <!-- 周视图内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date()
    }
  },
  computed: {
    weekDays() {
      return getWeekDays(this.currentDate)
    },
    currentWeekRange() {
      const start = this.weekDays[0]
      const end = this.weekDays[6]
      return `${start.toLocaleDateString()} - ${end.toLocaleDateString()}`
    }
  },
  methods: {
    prevWeek() {
      const d = new Date(this.currentDate)
      d.setDate(d.getDate() - 7)
      this.currentDate = d
    },
    nextWeek() {
      const d = new Date(this.currentDate)
      d.setDate(d.getDate() + 7)
      this.currentDate = d
    }
  }
}
</script>

添加事件展示功能

扩展day-cell显示事件：

<template>
  <div class="day-cell" @click="addEvent(day)">
    <div class="day-number">{{ day.getDate() }}</div>
    <div 
      v-for="event in getEventsForDay(day)" 
      :key="event.id"
      class="event"
    >
      {{ event.title }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      events: [
        { id: 1, title: 'Meeting', date: new Date(2023, 5, 12) }
      ]
    }
  },
  methods: {
    getEventsForDay(day) {
      return this.events.filter(event => 
        event.date.toDateString() === day.toDateString()
      )
    },
    addEvent(day) {
      // 实现添加事件逻辑
    }
  }
}
</script>

<style>
.event {
  background: #e3f2fd;
  margin: 2px;
  padding: 2px;
  border-radius: 3px;
  font-size: 0.8em;
}
</style>