我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

写这篇文章的原因是，老师今天布下的作业是日历。然后本来是用vant组件库中的日历组件解决的，结果经室友提醒项目效果必须包含有上个月和下个月，则vant组件中的日历组件就不符合了，只能自己手撕日历组件了。

项目效果

项目实现

html

就用几个简单的div，然后用v-for遍历四个数组
当天的动态样式，与i值对比需要减1

  <div class="calendar-container">
    <div class="calendar-title">{{currentDate}}</div>
    <div class="calendar-bd">
      <div v-for="item in weekTitle" :key="'星期' + item" class="calendar-week">{{item}}</div>
      <div v-for="item in preArr" :key="'上月' + item"  class="calendar-gray">{{item}}</div>
      <div v-for="(item, i) in currentArr" :key="'当月' + item"
      :class="{'active-day': i === currentDay - 1}">{{item}}</div>
      <div v-for="item in nextArr" :key="'下月' + item" class="calendar-gray">{{item}}</div>
    </div>
  </div>

script

只复制了一些关键代码
获取本月天数，new Date()第3个参数默认为1，就是每个月的1号，把它设置为0时， new Date()会返回上一个月的最后一天，然后通过getDate()方法得到天数
获取当月几号是星期几(月份不需要加1)，这个是我通过对手机上的日历进行对比试验得来的

    this.month = date.getMonth() + 1
    // 获取当前天
    this.currentDay = date.getDate()
    // 获取上月是多少天
    const preDays = (new Date(this.year, this.month - 1, 0)).getDate()
    // 获取本月是多少天
    const Days = (new Date(this.year, this.month, 0)).getDate()
    // 获取当月1号是星期几(月份不需要加1)
    const oneDay = (new Date(this.year, this.month - 1, 1)).getDay()
    // 获取当月最后1天是星期几(月份不需要加1)
    const endDay = (new Date(this.year, this.month - 1, Days)).getDay()
    // 根据需求使用push()方法和unshift()方法
    for (let i = 1; i <= Days; i++) {
      this.currentArr.push(i) // 当月
    }
    for (let i = preDays; i > preDays - oneDay; i--) {
      this.preArr.unshift(i) // 上月
    }
    for (let i = 1; i <= 6 - endDay; i++) {
      this.nextArr.push(i) // 下月
    }

css

用的是弹性布局
也都是一些常用的样式

.active-day{
  border: 1px solid blue; // 当天样式
}
.calendar-container{
  width: 520px;
  margin: 0 auto;
  font-weight: 700;
  .calendar-title{
    margin-bottom: 15px;
    text-align: center;
    font-size: 20px;
  }
  .calendar-bd{
    display: flex;
    width: 100%;
    padding: 10px;
    border: 1px solid blue; // 给个边框，效果好看一点
    flex-wrap: wrap;
    text-align: center;
    .calendar-week{
      margin: 10px 0;
    }
    .calendar-gray{
      color: gray;
      font-weight: 400;
    }
  }
  .calendar-bd div{
    flex: 14%;
    padding: 10px 0;
  }
}

vue2超简单日历组件

项目效果

项目实现

html

script

css