vue实现钉钉的考勤日历

本文实例为大家分享了vue实现钉钉的考勤日历的具体代码，供大家参考，具体内容如下

直接上效果图，需要再往下看

GitHub地址：vue-calendar-component
由于需要对此组件的样式及功能的扩展，直接复制代码过来修改，开始贴代码，很长很长慢慢看

checkCalendar.vue(子组件)

<style lang="scss" rel="stylesheet/scss">
    @media screen and (min-width: 460px) {
        .wh_item_date:hover {
            background: #71c7a5;
            cursor: pointer;
        }
    }

    * {
        margin: 0;
        padding: 0;
    }

    .wh_container {
        max-width: 410px;
        margin: auto;
    }

    li {
        list-style-type: none;
    }

    .wh_top_title {
        display: flex;
    }

    .wh_top_title li {
        cursor: pointer;
        display: flex;
        color: #fff;
        font-size: 18px;
        flex: 1;
        justify-content: center;
        align-items: center;
        height: 47px;
    }

    .wh_top_title .wh_content_li {
        cursor: auto;
        flex: 2.5;
        color: black;
    }

    .wh_content_all {
        font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
        "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
        background-color: white;
        width: 100%;
        overflow: hidden;
        padding-bottom: 8px;
    }

    .wh_content {
        display: flex;
        flex-wrap: wrap;
        padding: 0 3% 0 3%;
        width: 100%;
    }

    .wh_content:first-child .wh_content_item_tag,
    .wh_content:first-child .wh_content_item {
        color: #ddd;
        font-size: 16px;
    }

    .wh_content_item,
    wh_content_item_tag {
        font-size: 15px;
        width: 13.4%;
        text-align: center;
        color: #fff;
        position: relative;
    }

    .wh_content_item {
        height: 40px;
    }

    .wh_top_tag {
        width: 40px;
        height: 40px;
        line-height: 40px;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        color: black;
    }

    .wh_item_date {
        width: 30px;
        height: 30px;
        line-height: 30px;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        color: black;

        .smallDot {
            background-color: #f99341;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            text-align: center;
            margin-left: 13px;
        }

        .smallDot1 {
            background-color: #1989fa;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            text-align: center;
            margin-left: 13px;
        }
    }

    .wh_left {
        width: 12px;
        height: 12px;
        border-top: 2px solid #ffffff;
        border-left: 2px solid #ffffff;
        transform: rotate(-45deg);
        border-color: black;
    }

    .wh_left:active,
    .wh_right:active {
        border-color: #ddd;
    }

    .wh_right {
        width: 12px;
        height: 12px;
        border-top: 2px solid #ffffff;
        border-right: 2px solid #ffffff;
        transform: rotate(45deg);
        border-color: black;
    }

    .wh_content_item > .wh_isMark {
        margin: auto;
        border-radius: 50%;
        background: blue;
        z-index: 2;
    }

    .wh_content_item .wh_other_dayHide {
        color: #bfbfbf;
    }

    .wh_content_item .wh_want_dayHide {
        color: #bfbfbf;
    }

    .wh_content_item .wh_isToday {
        background: #77adfa;
        border-radius: 50%;
    }

    .wh_content_item .wh_chose_day {
        background: #1989fa;
        border-radius: 50%;
    }
</style>

<template>
    <section class="wh_container">
        <div class="wh_content_all">
            <div class="wh_top_title">
                <li @click="PreMonth(myDate,false)">
                    <div class="wh_left"></div>
                </li>
                <li class="wh_content_li">{{dateTop}}</li>
                <li @click="NextMonth(myDate,false)">
                    <div class="wh_right"></div>
                </li>
            </div>
            <div class="wh_content">
                <div class="wh_content_item" v-for="tag in textTop">
                    <div class="wh_top_tag">{{tag}}</div>
                </div>
            </div>
            <div class="wh_content">
                <div class="wh_content_item" v-for="(item,index) in list" @click="clickDay(item,index)">
                    <div class="wh_item_date" style="display: block"
                         v-bind:class="[{ wh_isMark: item.isMark},{wh_other_dayHide:item.otherMonth!=='nowMonth'},{wh_want_dayHide:item.dayHide},{wh_isToday:item.isToday},{wh_chose_day:item.chooseDay},setClass(item)]">
                        {{item.id}}
  "frfwCТffrbR&ТGSv&

vue实现钉钉的考勤日历

checkCalendar.vue(子组件)

浏览过的版块