当前位置：首页 > VUE

vue实现周界面

2026-01-17 18:10:53VUE

Vue 实现周界面的方法

使用日期库处理周数据

安装 date-fns 或 dayjs 库来处理日期逻辑。以 date-fns 为例，获取当前周的开始和结束日期：

import { startOfWeek, endOfWeek, format, addWeeks } from 'date-fns'

const today = new Date()
const weekStart = startOfWeek(today, { weekStartsOn: 1 }) // 周一作为起始日
const weekEnd = endOfWeek(today, { weekStartsOn: 1 })

动态生成周视图

创建可切换的周视图组件，包含日期切换逻辑：

vue实现周界面

data() {
  return {
    currentDate: new Date(),
    daysOfWeek: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  }
},
computed: {
  weekDays() {
    return Array(7).fill(0).map((_, i) => {
      const date = new Date(this.weekStart)
      date.setDate(date.getDate() + i)
      return {
        date,
        formatted: format(date, 'yyyy-MM-dd'),
        day: format(date, 'd')
      }
    })
  },
  weekStart() {
    return startOfWeek(this.currentDate, { weekStartsOn: 1 })
  }
},
methods: {
  prevWeek() {
    this.currentDate = addWeeks(this.currentDate, -1)
  },
  nextWeek() {
    this.currentDate = addWeeks(this.currentDate, 1)
  }
}

模板渲染

在模板中渲染周视图：

<template>
  <div class="week-view">
    <div class="week-header">
      <button @click="prevWeek">上一周</button>
      <span>{{ format(weekStart, 'yyyy年M月d日') }} - {{ format(weekEnd, 'yyyy年M月d日') }}</span>
      <button @click="nextWeek">下一周</button>
    </div>

    <div class="week-days">
      <div v-for="day in daysOfWeek" :key="day" class="day-header">
        {{ day }}
      </div>
    </div>

    <div class="week-grid">
      <div v-for="day in weekDays" :key="day.formatted" class="day-cell">
        <div class="date">{{ day.day }}</div>
        <!-- 这里放置每天的具体内容 -->
      </div>
    </div>
  </div>
</template>

样式设计

添加基础样式使周视图更直观：

vue实现周界面

.week-view {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.week-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.week-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}

.week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 5px;
}

.day-cell {
  min-height: 100px;
  border: 1px solid #eee;
  padding: 5px;
}

集成日历事件

如果需要显示每天的事件，可以添加事件数据：

data() {
  return {
    events: [
      { date: '2023-06-05', title: '会议' },
      { date: '2023-06-07', title: '预约' }
    ]
  }
},
computed: {
  dailyEvents() {
    return this.weekDays.map(day => {
      return this.events.filter(event => event.date === day.formatted)
    })
  }
}

在模板中显示事件：

<div class="week-grid">
  <div v-for="(day, index) in weekDays" :key="day.formatted" class="day-cell">
    <div class="date">{{ day.day }}</div>
    <div v-for="event in dailyEvents[index]" :key="event.title" class="event">
      {{ event.title }}
    </div>
  </div>
</div>

这种方法创建了一个灵活的周视图组件，支持日期切换和事件显示，可以根据需要进一步扩展功能。