vue3,设置高度,vue3自适应大小日历

<!--
 *日期：20210828
 *作者：dingwangjun
 *界面描述：进度日历日程,设置高度,自适应大小
-->
<template>
  <div style="height: 100%;padding: 5px;">
    <div style="height: 30px;">
      <div class="div-inline div_cale_heard1">
        <div style="text-align: center;font-size: 16px;">
          <div class="div-inline" style="width: 20px;">
            <i class="el-icon-d-arrow-left arrow_icon_font" @click="pickPre(currentYear,currentMonth)"></i>
          </div>
          <div class="div-inline" style="width: 100px;">
            {{parseTimeFive(new Date(selectData)).substr(0,8)}}
          </div>
          <div class="div-inline" style="width: 20px;">
            <i class="el-icon-d-arrow-right arrow_icon_font" @click="pickNext(currentYear,currentMonth)"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="div-inline div_calendar">
      <div style="height: 22px;">
        <div class="div-inline div_seven_day" v-for="(item,index) in weeks" :key="index">
          <div class="div_calendar_one">{{item.week}}</div>
        </div>
      </div>
      <div class="div_calendar_div" :style="{height: height+'px'}">
        <div class="div-inline div_seven_day" v-for="(dayObject,index) in days" :key="index">
          <div class="div_calendar_two" :style="{height:height/5+'px',background:isNowDay(dayObject.day)? '#ECF5FF':''}">
            <div style="text-indent:0.2em;" :style="{height: height/5*(1/3)+'px'}">{{dayObject.day.getDate()}}</div>
            <div style="text-align: center;color: #CDCDCD;" :style="{height: height/5*(2/3)+'px'}">{{dayObject.itemName}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { parseTimeThrid,parseTimeFive } from '@/utils/index'
  import { ref,reactive,toRefs,defineComponent,watch,computed,onMounted } from 'vue'
  export default defineComponent({
    name: 'MyScheduling',
    setup (props,content) {
      const state:any = reactive({
        days: [],
        height: 400,
        caleState: '在线',
        currentDay: 1,
        currentMonth: 1,
        currentYear: 1970,
        currentWeek: 1,
        selectData: new Date(),
        weeks: [
          {week: '一'},
          {week: '二'},
          {week: '三'},
          {week: '四'},
          {week: '五'},
          {week: '六'},
          {week: '日'},
        ],
      })
      onMounted(()=>{
        methods.initData("")
      })
      const methods = {
        parseTimeThrid,
        parseTimeFive,
        isNowDay(day){
          let day1 = parseTimeThrid(day)
          let day2 = parseTimeThrid(new Date())
          return day1===day2 ? true: false
        },
        initData(cur) {
          let date;
          if(cur) {
            date = new Date(cur);
          }else {
            let now=new Date();
            let d = new Date(methods.formatDate(now.getFullYear(),now.getMonth(), 1));
            d.setDate(35);
            date = new Date(methods.formatDate(d.getFullYear(),d.getMonth() + 1,1));
          }
          state.currentDay = date.getDate();
          state.currentYear = date.getFullYear();
          state.currentMonth = date.getMonth() + 1;
          state.currentWeek = date.getDay();
          if (state.currentWeek == 0) {
            state.currentWeek = 7;
          }
          let str = methods.formatDate(state.currentYear,state.currentMonth,state.currentDay);
          state.days.length = 0;
          // 今天是周日，放在第一行第7个位置，前面6个
          // 初始化本周
          for (let i=state.currentWeek-1; i>=0; i--) {
            let d = new Date(str);
            d.setDate(d.getDate() - i);
            let dayObject:any = {}; //用一个对象包装Date对象以便为以后预定功能添加属性
            dayObject.day = d; //格式化的日期放入day
            state.days.push(dayObject); //将日期放入data 中的days数组 供页面渲染使用
          }
          //其他周
          for (let i=1; i<=35-state.currentWeek; i++) {
            let d = new Date(str);
            d.setDate(d.getDate() + i);
            let dayObject:any = {};
            dayObject.day = d;
            state.days.push(dayObject);
          }
          for(let i=0;i<state.days.length;i++){
            state.days[0].itemName = '休息'
            let day = parseTimeThrid(state.days[i].day)
            let newDay = parseTimeThrid(new Date())
            if(day==newDay){
              state.days[i].itemName = '夜班'
            }
          }
        },
        // 格式化日期
        formatDate(year,month,day){
          let y = year;
          let m = month;
          if(m<10) m = "0" + m;
          let d = day;
          if(d<10) d = "0" + d;
          return y+"-"+m+"-"+d
        },
        // 向前推日期
        pickPre(year, month) {
          let d = new Date(methods.formatDate(year, month, 1));
          d.setDate(0);
          state.selectData = d
          state.initData(methods.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
        },
        // 向后推日期
        pickNext(year, month) {
          let d = new Date(methods.formatDate(year, month, 1));
          d.setDate(35);
          state.selectData = d
          state.initData(methods.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
        },
      }
      return {
        ...toRefs(state),
        ...methods,
      }
    }
  })
</script>

<style lang="scss">
  .div-inline {
    display: inline-block;
    vertical-align: middle;
  }
  .div_cale_heard1{
    width: -webkit-calc(100% - 130px);
    width: -moz-calc(100% - 130px);
    width: calc(100% - 130px);
  }
  .div_cale_heard2{
    width: 120px;
  }
  .arrow_icon_font{
    font-size: 25px;
    font-weight: 500;
    cursor: pointer;
  }
  .arrow_icon_font:hover{
    color: #666666;
    font-weight: bold;
  }
  .div_calendar{
    height: 180px;
    width: -webkit-calc(100% - 110px);
    width: -moz-calc(100% - 110px);
    width: calc(100% - 110px);
  }
  .div_seven_day{
    width: calc((100%)/7);
  }
  .div_calendar_div{
    border: 1px solid rgb(220, 223, 230);
  }
  .div_calendar_one{
    text-align: center;
    line-height: 25px;
    font-size: 14px;
    color: #606266;
  }
  .div_calendar_two{
    //height: 32px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid rgb(220, 223, 230);
  }
  .div_calendar_two:hover{
    background: #ECF5FF;
  }
  .div_manage_div{
    width: 100px;
    height: 180px;
    cursor: pointer;
  }
  .div_manage_one{
    height: 30px;
    line-height: 30px;
    font-size: 15px;
  }
  .div_manage_one:hover{
    font-weight: bold;
  }
  .div_manage_icon{
    height: 45px;
    font-size: 45px;
    color: #027DB4;
  }
</style>