vue仿寫日曆面板

之前寫過一篇js寫日曆面板的博文，是用table渲染的，現在用vue寫，效果如下：

思路

1，第一行星期幾的表頭是固定的
2，判斷要查詢的月份渲染是5行還是6行，也就是35格還是42格
3，獲取要查詢的月份的1號是星期幾，小於這個星期幾前面的格子渲染空格
4，渲染從1號開始的後面的格子，最後一行的空格判斷日期大於要查詢的月份天數則渲染空格

解決

所有地方的註釋都寫了：

//  查詢
<el-form-item label="選擇日期:" prop="">
    <el-date-picker
        v-model=""     // 這裏自己獲取當前日期就好了
        type="month"
        placeholder="選擇日期"
        :editable="false"
        :clearable="false"
        @change="changeDate"
        >
    </el-date-picker>
</el-form-item>
<el-form-item>
     <el-button type="warning"  @click.native="onSearch" icon="el-icon-search" round>查詢</el-button>
</el-form-item>


//  日曆面板
<div class="clander">
     <div id="contHead">
          <div class="title">      //  擡頭年月
              {{myyear}}年{{++mymouth}}月
          </div>
          <div class="week">    //  星期幾
              <p v-for="item in weekday" :key="item">
                  {{item}}
              </p>
          </div>
      </div>
      <div id="contBox">
          <div v-for="ite in mArr" :key="(ite+1)*Math.random()">   </div>  //   1號之前的空格
          <template v-for="item in contArr">
           <div v-if="item > monthdays[mymouth]" :key="(item+2)*Math.random()">  </div>    //  最後一行後面的空格（日期大於當月的天數則爲空）
              <div v-else @click="changeDay(item)" class="dayBox" :key="(item+1)*2">   //  渲染日期，放進數值
                  <span class="day">{{item}}</span>    // 日期數字
                  <span class="sum">{{allQuti[item-1]}}</span>  <!-- 當天數值， 這裏-1因爲數組裏面日期是從1號開始的，值是從第0位開始 -->
              </div>
          </template>
      </div>
      <div class="contFoot">
          合計：月累計用水 0 噸
      </div>
</div>




weekday: new Array("星期天","星期一","星期二","星期三","星期四","星期五","星期六"),
monthdays: new Array(31,28,31,30,31,30,31,31,30,31,30,31),     // 一月到12月的天數
mydate : new Date(),         // 要查詢的日期，這裏我用的是element的type='month'的日期組件，它接收這樣的格式
m: '',            // 當月1號星期幾
mArr: [],       //  1號之前的格子
contArr: [],   // 1號以後及1號的格子


computed: {
    myyear() {      // 獲取年
        return this.mydate.getFullYear()
    }, 
    mymouth: {      //  獲取月  這裏要使用set是因爲邏輯中對這個變量進行計算了，否則控制檯會報錯
        get: function () { return this.mydate.getMonth() } ,
        set: function (val) { }
    }
},



mounted () {
      // 初始化執行一次，獲取本月日曆面板
      this.sumClander()
},
methods: {
      // 日曆計算邏輯
      sumClander () {
          this.mArr = []
          this.contArr = []
          this.mydate.setDate(1);   // 將要查詢的月份設爲1號
          this.m = this.mydate.getDay()   // 獲取要查詢的月的1號是星期幾
          for (var d = 0; d < this.m; d++) {   // 渲染1號之前的空格
              this.mArr.push(d)
          }
          let cont = ''
          this.m >= 5 && this.monthdays[this.mymouth] > 30 ? cont = 42 : cont = 35  // 判斷日曆是五行（35格子）還是六行（42格子）（判斷1號是否大於等於禮拜五並且當月天數是否大於30天）
          for (var s = 1; s < cont - this.m + 1; s++) {      // 從1號開始後面的格子，渲染日期
              this.contArr.push(s)
          }
          if(this.myyear%4 == 0 && this.myyear%100 != 0 || this.myyear%400 == 0){  //判斷閏年2月=29天
              this.monthdays[1] = 29;
          }
      },
      // 日期組件change
      changeDate(value) {
          function checkTime(i){   //  時間補零
              if(i<10){
                  i = '0'+i
              }
              return i
          }
          var date; 
          date = new Date(value)
          this.yearTime = date.getFullYear()
          this.monthTime = checkTime(date.getMonth()+1)
          var changDate = this.yearTime + '-' + this.monthTime   // 將change後的日期轉變爲例：2020-06 這種格式
          this.mydate = new Date(changDate)      // 將change後的日期賦值給日曆的數據源this.mydate
      },
      //  點擊查詢
      onSearch () {
           this.sumClander()
      },
}

---

就醬實現邏輯，代碼還沒來得及優化，有些地方寫的有些粗糙，只是思路清晰就好了，可以自己調試優化，查詢一個月試試：

完美