vue仿写日历面板

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

之前[写过一篇js写日历面板的博文][js]，是用`table`渲染的，现在用vue写，效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]

## 思路 ##

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>  
                  </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()
          },
    }

--------------------

就酱实现逻辑，代码还没来得及优化，有些地方写的有些粗糙，只是思路清晰就好了，可以自己调试优化，查询一个月试试：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 1]

完美

[js]: https://blog.csdn.net/huanhuan03/article/details/106124254
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200604132141122.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200604135927385.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70