当前位置：首页 > VUE

vue实现周切换

2026-01-15 23:42:07VUE

Vue 实现周切换功能

使用日期库计算周范围

推荐使用date-fns或dayjs等轻量日期库处理周计算。以date-fns为例：

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

// 当前周起始和结束
const currentWeekStart = startOfWeek(new Date(), { weekStartsOn: 1 }) // 周一作为周开始
const currentWeekEnd = endOfWeek(new Date(), { weekStartsOn: 1 })

// 切换周
function changeWeek(weekOffset) {
  const newStart = addWeeks(currentWeekStart, weekOffset)
  const newEnd = addWeeks(currentWeekEnd, weekOffset)
  return { start: newStart, end: newEnd }
}

Vue组件实现

在组件中维护当前周状态并渲染日期：

vue实现周切换

<template>
  <div>
    <button @click="prevWeek">上一周</button>
    <span>{{ formattedWeekRange }}</span>
    <button @click="nextWeek">下一周</button>

    <div v-for="day in weekDays" :key="day">
      {{ format(day, 'yyyy-MM-dd') }}
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { 
  startOfWeek, 
  endOfWeek, 
  addWeeks, 
  format, 
  eachDayOfInterval 
} from 'date-fns'

export default {
  setup() {
    const currentWeekStart = ref(startOfWeek(new Date(), { weekStartsOn: 1 }))

    const weekDays = computed(() => {
      return eachDayOfInterval({
        start: currentWeekStart.value,
        end: endOfWeek(currentWeekStart.value, { weekStartsOn: 1 })
      })
    })

    const formattedWeekRange = computed(() => {
      return `${format(currentWeekStart.value, 'yyyy-MM-dd')} ~ 
              ${format(endOfWeek(currentWeekStart.value), 'yyyy-MM-dd')}`
    })

    function changeWeek(offset) {
      currentWeekStart.value = addWeeks(currentWeekStart.value, offset)
    }

    return {
      weekDays,
      formattedWeekRange,
      prevWeek: () => changeWeek(-1),
      nextWeek: () => changeWeek(1),
      format
    }
  }
}
</script>

日历周视图扩展

如需实现完整日历周视图，可结合表格布局：

vue实现周切换

<template>
  <table>
    <thead>
      <tr>
        <th v-for="day in weekDays" :key="day">
          {{ format(day, 'EEE') }}<br>
          {{ format(day, 'd') }}
        </th>
      </tr>
    </thead>
    <tbody>
      <!-- 时间轴或其他内容 -->
    </tbody>
  </table>
</template>

持久化当前周状态

使用localStorage保存当前周状态：

// 保存
localStorage.setItem('currentWeek', currentWeekStart.value.toISOString())

// 读取
const savedWeek = localStorage.getItem('currentWeek')
if (savedWeek) {
  currentWeekStart.value = new Date(savedWeek)
}

时区处理

如需处理时区问题，可使用dayjs的时区插件：

import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
import timezone from 'dayjs/plugin/timezone'

dayjs.extend(utc)
dayjs.extend(timezone)

const localDate = dayjs().tz('Asia/Shanghai')

标签: vue