手写日历组件

现在的各种各样的ui框架里面都有 但是呢 有些不是我们想要的 此时就要自己手动去写一个了 这里是基于周来的  先看下原型效果 里面可以展示年月日或者月日 代码里面有

<template>
  <div class="weekList">
    <div v-for="item in arrWeek" :key="item.date" class="dateInfo decItem">
      <span class="week">{{ item.week }}</span>
      <span class="date">{{ item.date }}</span>
    </div>
  </div>
  <div>
    <el-button type="primary" @click='changeWeek(1)'>上一周</el-button>
    <el-button type="primary" @click="changeWeek(2)">下一周</el-button>
  </div>
</template>
<script>
import { reactive, toRefs,onMounted } from 'vue';
export default {
  setup () {
    const data = reactive({
      arrWeek: [],
      timestamp:'',
      yearData:[]
    })
    const getCurrent = () => {
      // data.timestamp = new Date().getTime()
      const week = new Date(data.timestamp).getDay() // 今天是星期几（0~6）
      const sunday = data.timestamp - 24 * 60 * 60 * 1000 * week // 第一天的时间戳
      for (let i = 0; i < 7; i++) {
        var day = sunday + 24 * 60 * 60 * 1000 * (i + 1)
        var dateStr = parseTime(day, '{m}-{d},{a}')
        data.arrWeek.push({ date: dateStr.split(',')[0], week: dateStr.split(',')[1] })
        var dateyear = getYearData(day, '{y}-{m}-{d},{a}')
        data.yearData.push(dateyear.split(',')[0])
      }
    //   handelYsList()
    }
    const parseTime = (time, cFormat) => {
      const format = cFormat || '{m}-{d}'
      let date = null
      if (typeof time === 'object') {
        date = time
      } else {
        if (typeof time === 'string') {
          if (/^[0-9]+$/.test(time)) {
            time = parseInt(time)
          } else {
            time = time.replace(new RegExp(/-/gm), '/')
          }
        }
        if (typeof time === 'number' && time.toString().length === 10) {
          time = time * 1000
        }
        date = new Date(time)
      }
      const formatObj = {
        m: date.getMonth() + 1,
        d: date.getDate(),
        a: date.getDay(),
        b: date.getHours() < 12 ? 1 : 2
      }
      const timeStr = format.replace(/{([ymdhisab])+}/g, (result, key) => {
        const value = formatObj[key]
        // Note: getDay() returns 0 on Sunday
        if (key === 'a') {
          return ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][value]
        }
        if (key === 'b') {
          return value.toString()
        }
        return value.toString().padStart(2, '0')
      })
      return timeStr
    }
    //获取当前时间
    const getYearData = (time, cFormat) => {
      const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
      let date = null
      if (typeof time === 'object') {
        date = time
      } else {
        if (typeof time === 'string') {
          if (/^[0-9]+$/.test(time)) {
            time = parseInt(time)
          } else {
            time = time.replace(new RegExp(/-/gm), '/')
          }
        }
        if (typeof time === 'number' && time.toString().length === 10) {
          time = time * 1000
        }
        date = new Date(time)
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay(),
        b: date.getHours() < 12 ? 1 : 2
      }
      const timeStr = format.replace(/{([ymdhisab])+}/g, (result, key) => {
        const value = formatObj[key]
        // Note: getDay() returns 0 on Sunday
        if (key === 'a') {
          return ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][value]
        }
        if (key === 'b') {
          return value.toString()
        }
        return value.toString().padStart(2, '0')
      })
      return timeStr
    }
    const changeWeek=(num)=>{
      data.arrWeek = []
      data.yearData = []
      if (num === 1) {
        data.timestamp -= 24 * 60 * 60 * 1000 * 7
        getCurrent()
      } else {
        data.timestamp += 24 * 60 * 60 * 1000 * 7
        getCurrent()
      }
    }
    onMounted(()=>{
        data.timestamp = new Date().getTime()
        getCurrent()
    })
    return {
      ...toRefs(data),
      changeWeek
    }
  }
};
</script>
<style lang='scss' scoped>
.weekList{
    width:1200px;
    margin:0 auto;
    display: flex;
    justify-content: space-between;
    .decItem{
        width: 152px;
        height: 104px;
        background: rgba(243, 246, 250, 0.3);
        border-radius: 4px;
        border: 1px solid #D3D5E2;
        margin-bottom: 20px;
        font-size: 18px;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 500;
        color: #222B31;
        margin-right:17px;
        position: relative;
        .week{
            position: absolute;
            right:0;
            top:0;
            background: rgba(20, 133, 255, 0.1);
            border-radius: 0px 0px 0px 8px;
            padding:5px 10px;
            font-size: 12px;
            color:#1485FF;
        }
        .date{
            line-height:106px;
            color:#222B31;
            font-size: 20px;
        }
    }
}
</style>

代码是基于 vue3.0写的 不懂得可以参考vue3.0官网看看 或者自己拆分出来2.0的写法