使用dayjs实现周切换

最新推荐文章于 2024-04-30 10:30:31 发布

摸鱼少侠梁先生

最新推荐文章于 2024-04-30 10:30:31 发布

阅读量318

点赞数 2

文章标签：前端 javascript java

本文链接：https://blog.csdn.net/weixin_51140082/article/details/130462716

版权

效果图：
在这里插入图片描述

 <div v-if="weekData.length > 0">
            <div class="week-moudel" v-for="(itemFirst, indexFirst) in weekData" :key="indexFirst">
                <div class="time-moudel" :class="determineColor(itemFirst) ? 'time-font' : ''">
                    <span>{{ itemFirst.day }}</span>
                    <p>{{ getWeek(itemFirst) }}</p>
                </div>
                <div style="flex: 1">
                    <div v-if="itemFirst.dcAffairPushes.length > 0">
                        <div class="content-moudel" v-for="(itemSecond, indexSecond) in itemFirst.dcAffairPushes" :key="indexSecond" @click="goDetails(itemSecond)">
                            <div class="first-box">
                                <span class="icon-title">厅领导</span>
                                <span class="title">{{ itemSecond.fTaskName }}</span>
                            </div>
                            <div class="second-box">
                                <span class="time">
                                    <svg-icon icon='time' class="week-icon-common"></svg-icon>{{ itemSecond.fStartTime + '~' + itemSecond.fEndTime }}
                                </span>
                                <span class="dept">
                                    <svg-icon icon='adressIcon' class="week-icon-common"></svg-icon>{{ itemSecond.fAddress }}
                                </span>
                            </div>
                        </div>
                    </div>
                    <div v-else>
                        <div class="content-moudel">
                            <div class="first-box">
                                <span class="no-title">无事件</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-else>
          <div class="notResult">
              <div>
                  <svg-icon icon='notResult' classNmae="search-box"></svg-icon>
              </div>
              <span>无相关内容</span>
          </div>
        </div>
```
方法
```js
preNextBtn (val) {
      const weekChangeDate = dayjs(this.currentDate)
      if (val === 'prev') { // 上一周
        this.currentDate = dayjs(weekChangeDate.subtract(7, 'day')).format('YYYY-MM-DD')
        this.weekNum = this.weekNum - 1
      } else { // 下一周
        this.currentDate = dayjs(weekChangeDate.add(7, 'day')).format('YYYY-MM-DD')
        this.weekNum += 1
      }
      this.$emit('selectWeek', this.currentDate, this.weekNum)
    },
    determineColor (item) {
      return item.date === dayjs(new Date()).format('YYYY-MM-DD')
    },
    // 转化格式
    getWeek (item) {
      const weekObj = [
        '周日',
        '周一',
        '周二',
        '周三',
        '周四',
        '周五',
        '周六'
      ]
      const week = dayjs(item.date).day()
      let weekLabel = ''
      for (const key in weekObj) {
        if (key * 1 === week) {
          weekLabel = weekObj[key]
        }
      }
      //   weekObj.forEach(res => {
      //     if (week === res.value) {
      //       weekLabel = res.label
      //     }
      //   })
      return weekLabel
    },
    // 进入详情页
    goDetails (item) {
      const params = {
        fId: item.fId
      }
      this.$router.push({ path: '/eidtDetails', query: params })
    }
```

注意使用dayjs的week方法要先定义
```js
import dayjs from 'dayjs'
var weekOfYear = require('dayjs/plugin/weekOfYear')
var weekday = require('dayjs/plugin/weekday')
dayjs.extend(weekOfYear)
dayjs.extend(weekday)
```

![在这里插入图片描述](https://img-blog.csdnimg.cn/9b01503c1fac4354a6ad235046aaa978.png)

知道了年份，周数和星期如何推算出具体日期

```js
dayjs('2023').week(17).day(6).format('YYYY-MM-DD')
```