当前位置：首页 > VUE

vue实现周切换

2026-03-08 12:57:54VUE

Vue 实现周切换功能

周切换功能通常用于日历、日程管理或数据统计场景，允许用户按周查看数据。以下是实现周切换的几种方法：

基于日期计算的方法

安装 date-fns 库处理日期：

npm install date-fns

组件实现：

vue实现周切换

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

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

export default {
  data() {
    return {
      currentDate: new Date()
    }
  },
  computed: {
    currentWeekRange() {
      const start = startOfWeek(this.currentDate, { weekStartsOn: 1 })
      const end = endOfWeek(this.currentDate, { weekStartsOn: 1 })
      return `${format(start, 'yyyy-MM-dd')} 至 ${format(end, 'yyyy-MM-dd')}`
    }
  },
  methods: {
    prevWeek() {
      this.currentDate = addWeeks(this.currentDate, -1)
    },
    nextWeek() {
      this.currentDate = addWeeks(this.currentDate, 1)
    }
  }
}
</script>

基于周数的方法

适合需要显示年第几周的场景：

<script>
export default {
  data() {
    return {
      currentYear: new Date().getFullYear(),
      currentWeek: this.getWeekNumber(new Date())
    }
  },
  methods: {
    getWeekNumber(date) {
      const firstDay = new Date(date.getFullYear(), 0, 1)
      const days = Math.floor((date - firstDay) / (24 * 60 * 60 * 1000))
      return Math.ceil((days + firstDay.getDay() + 1) / 7)
    },
    prevWeek() {
      if (this.currentWeek > 1) {
        this.currentWeek--
      } else {
        this.currentYear--
        this.currentWeek = 52
      }
    },
    nextWeek() {
      if (this.currentWeek < 52) {
        this.currentWeek++
      } else {
        this.currentYear++
        this.currentWeek = 1
      }
    }
  }
}
</script>

结合 Vuex 的状态管理

对于复杂应用，建议使用 Vuex 管理周状态：

vue实现周切换

store.js:

export default new Vuex.Store({
  state: {
    currentWeekStart: startOfWeek(new Date(), { weekStartsOn: 1 })
  },
  mutations: {
    setWeekStart(state, date) {
      state.currentWeekStart = date
    }
  },
  actions: {
    changeWeek({ commit, state }, offset) {
      const newDate = addWeeks(state.currentWeekStart, offset)
      commit('setWeekStart', newDate)
    }
  }
})

组件中使用：

<template>
  <div>
    <button @click="changeWeek(-1)">上一周</button>
    <span>{{ weekRange }}</span>
    <button @click="changeWeek(1)">下一周</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['currentWeekStart']),
    weekRange() {
      const start = this.currentWeekStart
      const end = endOfWeek(start, { weekStartsOn: 1 })
      return `${format(start, 'yyyy-MM-dd')} 至 ${format(end, 'yyyy-MM-dd')}`
    }
  },
  methods: {
    ...mapActions(['changeWeek'])
  }
}
</script>

周切换与数据加载结合

实际应用中通常需要加载对应周的数据：

<script>
export default {
  methods: {
    async loadWeekData() {
      const start = startOfWeek(this.currentDate, { weekStartsOn: 1 })
      const end = endOfWeek(this.currentDate, { weekStartsOn: 1 })

      try {
        const response = await api.getData({
          startDate: format(start, 'yyyy-MM-dd'),
          endDate: format(end, 'yyyy-MM-dd')
        })
        this.weekData = response.data
      } catch (error) {
        console.error('加载数据失败', error)
      }
    },
    prevWeek() {
      this.currentDate = addWeeks(this.currentDate, -1)
      this.loadWeekData()
    },
    nextWeek() {
      this.currentDate = addWeeks(this.currentDate, 1)
      this.loadWeekData()
    }
  },
  created() {
    this.loadWeekData()
  }
}
</script>