记一次写考勤日历组件（vue）

最新推荐文章于 2024-08-20 16:37:50 发布

0xchance

最新推荐文章于 2024-08-20 16:37:50 发布

阅读量2.1k

点赞数 2

分类专栏：工作笔记文章标签： vue

本文链接：https://blog.csdn.net/TiAmo_Lyj/article/details/105164437

版权

本文记录了一次使用Vue开发考勤日历组件的过程，借助moment.js进行时间处理。组件包括HTML结构、JS逻辑和CSS样式。虽然样式简单，但代码注释详细，可以直接复用或作为参考。通过这个总结，有助于日后快速回顾该功能的实现。

摘要由CSDN通过智能技术生成

这是在工作的时候做的一个考勤日历功能，整体来说比较简单，记录在此，方便以后复盘

用到的组件有moment.js，有这个组件大大简化了一些时间的加减计算

先上整体效果：
在这里插入图片描述
ps:样式有点丑，没做调整
1.首先是HTML结构部分

  <div style="width: 500px;height: 500px;">
    <!--    标题、上月、下月-->
    <div class="width-100-per layout-side" style="height: 10%;">
      <div class="cursor-pointer layout-center leftRightBtn" @click="prevMonth">&lt;</div>
      <div class="height-100-per layout-center-top width-40-per">
        <div class="layout-center timeTitle">
          <span style="font-weight: bold">{
   {
   `${
     newDate.split('-')[0]}年${
     newDate.split('-')[1]}月`}}</span>
        </div>
      </div>
      <div class="cursor-pointer layout-center leftRightBtn" @click="nextMonth">&gt;</div>
    </div>
    <!--    日期表-->
    <div class="width-100-per layout-left-top padding-10-px" style="height: calc(100% - 10%)">
      <!--      星期-->
      <div class="width-100-per layout-left-top" style="height: 10%">
        <div style="width: calc(100% / 7);" class="layout-center" v-for="(i,index) in weekArr" :key="index + i">{
   {
   i}}
        </div>
      </div>
      <!--      日期-->
      <div class="width-100-per layout-left-top" style="height: 90%">
        <template v-for=