vue3.0實現(xiàn)考勤日歷組件使用詳解
更新時間：2022年08月29日 15:37:57 作者：捕風的紫色鳶尾
這篇文章主要為大家詳細介紹了vue3.0實現(xiàn)考勤日歷組件使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue3.0實現(xiàn)考勤日歷組件使用的具體代碼，供大家參考，具體內(nèi)容如下
自定義日歷組件，首先我們要明確需求與面板展示內(nèi)容
1、周日~周六。
2、當前月日歷1~（28/29/30/31），當前月1號如果不是周日，需要上月最后日歷補全，當月最后一天不是周六需要下月開始日歷補全。
3、切換至上月，切換至下月按鈕
4、當前年月展示
5、如果某日有考勤異常，考勤異常日期標記
6、當前日期展示展示為‘今’
7、點擊上月日期切換至上月面板并選中該日期彈出該日期考勤信息
8、點擊下月日期切換至下月面板并選中該日期彈出該日期的考勤信息
9、點擊當前月日期則選中當前日期并彈出該日期的考勤信息
首先日歷面板實現(xiàn)
HTML結(jié)構如下
<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計算出的當前面板應該展示的日歷數(shù)組對象(包括上月的日期、當月日期和下月日期)，item.class為當前日期展示樣式的類名(包括上月日期樣式‘upMonth’，下月日期樣式‘lastMonth’，假日樣式‘Holiyday’，選中樣式‘selected’，今天樣式‘today’，請假樣式‘leave’，考勤異常樣式‘absent’)，item.date為日期（xxxx-xx-xx）,item.text為當前日，今天展示為‘今’，‘<i></i>’標簽用于展示考勤異常和請假，intraday方法為點擊某日
面板渲染方式，實現(xiàn)dateList數(shù)組的計算
const MonthDay = ref([31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]); //確定每月天數(shù)
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月份，當月總天數(shù)為29天
? ? ? if (month.value == 1) {
? ? ? ? if (
? ? ? ? ? (year.value % 4 == 0 && year.value % 100 != 0) ||
? ? ? ? ? year.value % 400 == 0
? ? ? ? ) {
? ? ? ? ? allDay = 29;
? ? ? ? }
? ? ? }
? ? ? //判斷本月第一天是星期幾
? ? ? oDate.setDate(1); //時間調(diào)整到本月第一天
? ? ? var weekStar = oDate.getDay(); //讀取本月第一天是星期幾
? ? ? oDate.setDate(allDay); //時間調(diào)整到本月最后一天
? ? ? var weekEnd = oDate.getDay(); //讀取本月最后一天是星期幾
? ? ? var dateArry = [];
? ? ? //上月日期插入數(shù)組
? ? ? 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: j + 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);?
? ? ? ? ? //判斷是否節(jié)假日
? ? ? ? ? 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;
? ? };上月、下月切換按鈕點擊實現(xiàn)
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);
? ? };
? ? // ?向下翻月
? ? 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;
? ? };以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue前端解析Excel數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue el-upload 上傳文件格式校驗方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue列表如何自動滾動到制定位置問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
當一個組件需要獲取多個狀態(tài)的時候,將這些狀態(tài)都聲明為計算屬性會有些重復和冗余,為了解決這個問題我們可以使用mapState輔助函數(shù)幫助我們生成計算屬性,這篇文章主要給大家介紹了關于vuex狀態(tài)管理之mapState用法的相關資料,需要的朋友可以參考下2023-12-12
Vuejs第一篇之入門教程詳解（單向綁定、雙向綁定、列表渲染、響應函數(shù)）
組件（Component）是 Vue.js 最強大的功能之一。接下來給大家介紹vuejs單向綁定、雙向綁定、列表渲染、響應函數(shù)的相關知識，非常不錯，感興趣的朋友一起看看吧2016-09-09
這篇文章主要介紹了vue項目如何設置全局字體樣式font-family問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
本文主要介紹了vue3安裝vant實現(xiàn)按需引入和全局引入，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
這篇文章主要介紹了vue+element-ui實現(xiàn)主題切換功能，本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06
這篇文章主要為大家介紹了petite?vue的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
下面小編就為大家分享一篇Vue父組件調(diào)用子組件事件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02