记一次写考勤日历组件(vue)

本文记录了一次使用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=
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值