当前位置：首页 > VUE

vue实现周切换

2026-03-28 23:52:31VUE

Vue 实现周切换功能

使用日期库计算周范围

推荐使用date-fns或dayjs这类轻量级日期库处理周计算。安装date-fns后：

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

data() {
  return {
    currentDate: new Date(),
    weekFormat: 'yyyy-MM-dd'
  }
},
methods: {
  getWeekRange() {
    return {
      start: format(startOfWeek(this.currentDate), this.weekFormat),
      end: format(endOfWeek(this.currentDate), this.weekFormat)
    }
  },
  changeWeek(weeks) {
    this.currentDate = addWeeks(this.currentDate, weeks)
  }
}

渲染周切换界面

模板部分可设计为左右箭头切换配合周范围显示：

vue实现周切换

<div class="week-picker">
  <button @click="changeWeek(-1)">← 上周</button>
  <span>{{ getWeekRange().start }} 至 {{ getWeekRange().end }}</span>
  <button @click="changeWeek(1)">下周 →</button>
</div>

处理周数据加载

在监听currentDate变化时加载对应周数据：

vue实现周切换

watch: {
  currentDate() {
    this.loadWeekData()
  }
},
methods: {
  async loadWeekData() {
    const { start, end } = this.getWeekRange()
    // 调用API获取start到end之间的数据
  }
}

国际化周显示

如需支持多语言周显示，可配置不同的格式：

// 中文周显示
weekFormat: 'MM月dd日'

// 英文周显示
weekFormat: 'MMM dd'

周切换动画效果

添加过渡动画增强用户体验：

<transition name="slide">
  <div :key="getWeekRange().start">
    <!-- 周内容 -->
  </div>
</transition>

<style>
.slide-enter-active, .slide-leave-active {
  transition: all 0.5s;
}
.slide-enter {
  transform: translateX(100%);
}
.slide-leave-to {
  transform: translateX(-100%);
}
</style>

标签: vue