vue仿写日历面板-蒲公英云

vue仿写日历面板

梦里梦外; 2023-02-15 03:39 21阅读 0赞

之前写过一篇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()
      },
}