vue3.0实现考勤日历组件使用详解

本文实例为大家分享了vue3.0实现考勤日历组件使用的具体代码，供大家参考，具体内容如下自定义日历组件，首先我们要明确需求与面板展示内容1、周日~周六。2、当前月日历1~（28/29/30/31），当...

本文实例为大家分享了vue3.0实现考勤日历组件使用的具体代码，供大家参考，具体内容如下

自定义日历组件，首先我们要明确需求与面板展示内容

1、周日~周六。
2、当前月日历1~（28/29/30/31），当前月1号如果不是周日，需要上月最后日历补全，当月最后一天不是周六需要下月开始日历补全。
3、切换至上月，切换至下月按钮
4、当前年月展示
5、如果某日有考勤异常，考勤异常日期标记
6、当前日期展示展示为‘今’
7、点击上月日期切换至上月面板并选中该日期弹出该日期考勤信息
8、点击下月日期切换至下月面板并选中该日期弹出该日期的考勤信息
9、点击当前月日期则选中当前日期并弹出该日期的考勤信息

首先日历面板实现

html结构如下

<ul class="week">
   <li>日</li>
   <li>一</li>
   <li>二</li>
   <li>三</li>
   <li>四</li>
   <li>五</li>
   <li>六</li>
  </ul>
  <ul class="dateList">
   <li
    v-for="item in dateList.List"
    @click="intraday(item, item.date)"
    :class="item.class"
    :date="item.date"
    :key="item"
   >
    <div>{{ item.text }}</div>
    <i></i>
   </li>
  </ul>

其中dateList为我们js计算出的当前面板应该展示的日历数组对象(包括上月的日期、当月日期和下月日期)，item.class为当前日期展示样式的类名(包括上月日期样式‘upMonth’，下月日期样式‘lastMonth’，假日样式‘Holiyday’，选中样式‘selected’，今天样式‘today’，请假样式‘leave’，考勤异常样式‘absent’)，item.date为日期（xxxx-xx-xx）编程,item.text为当前日，今天展示为‘今’，‘<i></i>’标签用于展示考勤异常和请假，intraday方法为点击某日

面板渲染方式，实现dateList数组的计算

const MonthDay = ref([31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]); //确定每月天数
const calendar = (n, seletDay) => {
    //n为0表示当月，n为-1表示上月，n为1表示下月,seletDay默认选中日期
   var oDate = new Date(); //定义时间
   oDate.setMonth(oDate.getMonth() + n); //设置月份，
   year.value = oDate.getFullYear(); //年，获取当前年份
   month.value = oDate.getMonth(); //月，获取当前月份（0-11）
   var allDay = MonthDay.value[month.value]; //计算本月有多少天
   var upMonthDay = MonthDay.value[month.value == 0 ? 11 : month.value - 1];//计算上个月有多少天
   //判断闰年，如果是闰年的2月份，当月总天数为29天
   if (month.value == 1) {
    if (
     (year.value % 4 == 0 && year.value % 100 != 0) ||
     year.value % 400 == 0
    ) {
     allDay = 29;
    }
   }
   //判断本月第一天是星期几
   oDate.setDate(1); //时间调整到本月第一天
   var weekStar = oDate.getDay(); //读取本月第一天是星期几
   oDate.setDate(allDay); //时间调整到本月最后一天
   var weekEnd = oDate.getDay(); //读取本月最后一天是星期几
   var dateArry = [];
   //上月日期插入数组
   for (var j = upMonthDay - weekStar; j < upMonthDay; j++) {
    let obj = {
     class: ["upMonth"], 
     date:
      year.value +
      "-" +
      (month.value < 10 ? "0" : "") +
      (month.value + 1 - 1) +
      "-" +
      (j < 9 ? "0" : "") +
      (j + 1),
     text: j + 1,
     day: http://www.cppcns.comj + 1,
    };
    dateArry.push(obj);
   }
   //当月日期插入到dateList
   for (var i = 1; i <= allDay; i++) {
    let obj = {
     class: [],
     date:
      year.value +
      "-" +
      (month.value < 9 ? "0" : "") +
      (month.value + 1) +
      "-" +
      (i < 10 ? "0" : "") +
      i,
     text: i,
     day: i,
    };

    //判断是否当月(非当月)
    if (
     year.value != today.getFullYear() ||
     month.value != today.getMonth()
    ) {
     if (seletDay && seletDay != "n") { //存在默认选中日期时
      if (i == seletDay) {
       obj.class.push("selected"); //默认选中传入日期
       upitem = obj;
      }
     } else if (i == 1) { //没有默认选中日期时默认选中1号
      //判断是否是1号
      obj.class.push("selected"); //默认选中1号
      upitem = obj;
     }
    }else { //(当月)
     // 判断是否当天
    if (format(today) == obj.date) { //(当天)
      obj.class.push("today");
      obj.text = "今";
      if(!seletDay || seletDay == "n"){ //没有默认选中日期时默认选中‘今天'
       obj.class.push("selected");
       upitem = obj;
      }
     }else{
       if (seletDay && seletDay != "n") { //非当天
        if (i == seletDay) {
         obj.class.push("selected"); //默认选中传入日期
         upitem = obj;
        }
       }
     }
    }

    if (findDate(monthDate, 'perday', obj.date)!=-1) {
     var k = findDate(monthDate, 'perday', obj.date);
     //判断是否节假日
     if (monthDate[k].isworkday == "否") {
      obj.class.push("Holiyday");
     } else if ( //判断考勤异常
      monthDate[k].attendflags != "迟到"
     ) {
      obj.class.push("absent");
     } else if (
      //判断请假
      monthDate[k].leaveflags == "请假"
     ) {
      obj.class.push("leave");
     }
    }
    dateArry.push(obj);
   }
   //下月日期插入到dateList
   for (var k = 1; k <= 6 - weekEnd; k++) {
    let obj = {
     class: ["lastMonth"],
     date:
      year.value +
      "-" +
      (month.value < 8 ? "0" : "") +
      (month.value + 1 + 1) +
      "-" +
      (k < 10 ? "0" : "") +
      k,
     text: k,
     day: k,
    };
    dateArry.push(obj);
   }
   dateList.List = dateArry;
  };

上月、下月切换按钮点击实现

html部分:

<div class="calenDartitle">
   <-- 切换至上月-->
   <img
    class="upMonth"
    src="../assets/images/up.png"
    @click="upMonth('n')" //传入‘n'表示没有默认选中
   />
   <h4>
    <span>{{ month + 1 }}月</span> <span>{{ year }}年</span>
   </h4>
   <-- 切换至下月-->
   <img
    class="lastMonth"
    src="../assets/images/last.png"
    @click="lastMonth('n')" //传入‘n'表示没有默认选中
   />
</div>

js部分：

// 向上翻月
  const upMonth = (day) => {
   monthDate = "";
   total.obj = "";
   normally.value = true;
   calendar(--iNow, day);
  };
 http://www.cppcns.com // 向下翻月
  const lastMonth = (day) => {
   monthDate = "";
   total.obj = "";
   normally.value = true;
   calendar(++iNow, day);
  };

点击某日intraday方法

// 点击日历图上某天
  const intraday = async (item, date) => {
   if (item.class.indexOf("upMonth") > -1) { //如果点击的是上月日期则切换到上月日历面板
    upMonth(item.day);
    return;
   }
   if (item.class.indexOf("lastMonth") > -1) {//如果点击的是下月日期则切换到下月日历面板
    lastMonth(item.day);
    return;
   }
   
   //点击当前月日期 
   upitem.class[upitem.class.indexOf("selected")] = null; //上次点击日期去除选中样式
   item.class.push("selected"); //当前点击日期加上选中样式
   upitem = item;
  };

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。