基于Vue如何實現支持按周切換的日歷

這篇文章主要介紹基于Vue如何實現支持按周切換的日歷，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

基于Vue的日歷小功能，可根據實際開發情況按每年、每月、每周、進行切換，具體內容如下

<template>
 <div class="date">
   <!-- 年份 月份 -->
   <div class="month">
    <p>{{ currentYear }}年{{ currentMonth }}月</p>
   </div>
   <!-- 星期 -->
   <ul class="weekdays">
    <li>一</li>
    <li>二</li>
    <li>三</li>
    <li>四</li>
    <li>五</li>
    <li>六</li>
    <li>日</li>
   </ul>
   <!-- 日期 -->
   <ul class="days">
    <li @click="pick(day)" v-for="(day, index) in days" :key="index">
     <!--本月-->
     <span v-if="day.getMonth()+1 != currentMonth" class="other-month">{{ day.getDate() }}</span>
     <span v-else>
     <!--今天-->
     <span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()" class="active">{{ day.getDate() }}</span>
     <span v-else>{{ day.getDate() }}</span>
     </span>
    </li>
   </ul>
 </div>
</template>

js部分：目前默認顯示一周，可根據實際情況更改

<script>


 export default {
  name: 'date',

  data () {
   return {
    currentYear: 1970,  // 年份
    currentMonth: 1, // 月份
    currentDay: 1,  // 日期
    currentWeek: 1,  // 星期
    days: [],
   }
  },

  mounted () {

  },

  created () {
   this.initData(null)
  },

  methods: {
   formatDate (year, month, day) {
    const y = year
    let m = month
    if (m < 10) m = `0${m}`
    let d = day
    if (d < 10) d = `0$aegqsqibtmh`
    return `${y}-${m}-$aegqsqibtmh`
   },

   initData (cur) {
    let date = ''
    if (cur) {
     date = new Date(cur)
    } else {
     date = new Date()
    }
    this.currentDay = date.getDate()     // 今日日期 幾號
    this.currentYear = date.getFullYear()    // 當前年份
    this.currentMonth = date.getMonth() + 1  // 當前月份
    this.currentWeek = date.getDay() // 1...6,0  // 星期幾
    if (this.currentWeek === 0) {
     this.currentWeek = 7
    }
    const str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay)// 今日日期 年-月-日
    this.days.length = 0
    // 今天是周日，放在第一行第7個位置，前面6個 這里默認顯示一周，如果需要顯示一個月，則第二個循環為 i<= 35- this.currentWeek
    /* eslint-disabled */
    for (let i = this.currentWeek - 1; i >= 0; i -= 1) {
     const d = new Date(str)
     d.setDate(d.getDate() - i)
      // console.log(y:" + d.getDate())
     this.days.push(d)
    }
    for (let i = 1; i <= 7 - this.currentWeek; i += 1) {
     const d = new Date(str)
     d.setDate(d.getDate() + i)
     this.days.push(d)
    }
   },

   // 上個星期
   weekPre () {
    const d = this.days[0]  // 如果當期日期是7號或者小于7號
    d.setDate(d.getDate() - 7)
    this.initData(d)
   },

   // 下個星期
   weekNext () {
    const d = this.days[6]  // 如果當期日期是7號或者小于7號
    d.setDate(d.getDate() + 7)
    this.initData(d)
   },

   // 上一個月  傳入當前年份和月份
   pickPre (year, month) {
    const d = new Date(this.formatDate(year, month, 1))
    d.setDate(0)
    this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
   },


   // 下一個月  傳入當前年份和月份
   pickNext (year, month) {
    const d = new Date(this.formatDate(year, month, 1))
    d.setDate(35)
    this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
   },

   // 當前選擇日期
   pick (date) {
    alert(this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate()))
   },
  },
 }
</script>

<style lang="scss">
 @import "~base";

 .date {
  height: px2rem(180);
  color: #333;

  .month {
   font-size: px2rem(24);
   text-align: center;
   margin-top: px2rem(20);
  }

  .weekdays {
   display: flex;
   font-size: px2rem(28);
   margin-top: px2rem(20);

   li {
    flex: 1;
    text-align: center;
   }
  }

  .days {
   display: flex;

   li {
    flex: 1;
    font-size: px2rem(30);
    text-align: center;
    margin-top: px2rem(10);
    line-height: px2rem(60);

    .active {
     display: inline-block;
     width: px2rem(60);
     height: px2rem(60);
     color: #fff;
     border-radius: 50%;
     background-color: #fa6854;
    }

    .other-month {
     color: #e4393c;
    }
   }
  }
 }
</style>

以上是“基于Vue如何實現支持按周切換的日歷”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！