欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

# pc端个性化日历实现

程序员文章站 2022-04-09 17:12:43
pc端个性化日历实现 技术:vue = v for、slot scop 插槽域 需求:需要实现日历上每一天动态显示不同的信息 思路:运用vue 中 slot scop 插槽域的知识点,将个性化的代码样式放到slot中 再通过slot scop 获取这个插槽中的所需数据 一、实现日历组件 思路:布局上 ......

pc端个性化日历实现

技术:vue => v-for、slot-scop 插槽域
需求:需要实现日历上每一天动态显示不同的信息
思路:运用vue 中 slot-scop 插槽域的知识点,将个性化的代码样式放到slot中 再通过slot-scop 获取这个插槽中的所需数据

一、实现日历组件

思路:布局上就是一个7列,行数不确定的表格。只不过,日历的表格是宽和高相等,随着浏览器的大小变化,表格大大小也要变化,所以要用padding布局,难点在日期数组的生成上面。
1.布局的实现
<div class="calendar">
    <div class="calendar-operation">
        <span class="calendar-title">{{title}}</span>
        <div class="calendar-yearmonth">
           <icon type="ios-arrow-back" style="margin-right:30px;" @click="prev" />
           <div class="calendar-yearmonth-content">{{yearmonth}}</div>
           <icon type="ios-arrow-forward" style="margin-left:30px;color:" @click="next" />
        </div>****
    </div>
    <div class="calendar-head">
        <div class="calendar-head-item">星期日</div>
        <div class="calendar-head-item">星期一</div>
        <div class="calendar-head-item">星期二</div>
        <div class="calendar-head-item">星期三</div>
        <div class="calendar-head-item">星期四</div>
        <div class="calendar-head-item">星期五</div>
        <div class="calendar-head-item">星期六</div>
    </div>
    <div class="calendar-content">
        <div v-for="(item,index) in datearray" :key="index" class="calendar-row">
            <div v-for="(val,key) in item" :key="key" :class="{'calendar-cols':true,'calendar-enable':!val.enable}">
                <span class="calendar-cols-content">{{val.value}}</span>
                <div class="calendar-cols-opera" >
                    <div style="height:100%;">
                        <slot :oper = 'val.oper'></slot>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style scoped lang="less">
.calendar{
    width:100%;
    border:1px solid #e8eaec;
    border-left: 0;
    border-radius: 8px;
    background: #fff;
    .calendar-operation {
        height: 60px;
        border-bottom: 1px solid #e8eaec;
        border-left:1px solid #e8eaec;
        .calendar-title{
            display:block;
            font-size:12px;
            color:#fb9153;
            float: left;
            height: 100%;
            line-height:60px;
            padding-left: 40px;
        }
        .calendar-yearmonth{
            display: flex;
            height: 100%;
            justify-content: center;
            align-items: center;
            font-size:17px;
            color: #fb9153;
        }
    }
    .calendar-head {
        display: flex;
        height:40px;
        border-bottom: 1px solid #e8eaec;
        border-left:1px solid #e8eaec;
        .calendar-head-item {
            flex: 1;
            height:100%;
            line-height:40px;
            font-size: 12px;
            text-align: center;
            border-left: 1px solid #e8eaec;
        }
    }
    .calendar-content {
        width: 100%;
        .calendar-row{
            width:100%;
            display: flex;
            .calendar-cols {
                position: relative;
                flex: 1;
                height: 0;
                padding-bottom: 14%;
                border-bottom: 1px solid #e8eaec;
                border-left: 1px solid #e8eaec;
                .calendar-cols-content{
                    display:block;
                    text-align: right;
                    height:0;
                    padding-bottom: 15%;
                    box-sizing: border-box;
                    padding: 0 10px;
                    margin-bottom: 15%;
                }
                .calendar-cols-opera{
                    width:100%;
                    height: 0;
                    padding-bottom: 84%;
                    box-sizing: border-box;
                    overflow-y: auto;
                }
            }  
        }
        .calendar-enable{
            color: #e8eaec;
        }
    }
}
</style>
2.日历数组的实现
 思路:获取当前月有多少天,当月第一天对应的星期。
 实现:如何获取这个月的天数,通过下一个月的第一天 减去一天时间就是这个月的最后一天,进而能知道这个月的天数
 //获取当月最后一天
 function getlastdate(year,month) {
    let currentmonth = month - 1
    let nextmonth = currentmonth + 1
    if(nextmonth > 11 ) {
        nextmonth = 0
        year++
    }
    //let nextmonthfisrtdate = new date(year,nextmonth,1).getdate()
    let lastdate = new date(new date(year,nextmonth,1).gettime() - 1000*60*60*24).getdate()
    return lastdate
}
//获取当月第一天对应的星期
function getfirstday(year,month) {
    let currentmonth = month - 1
    return new date(year,currentmonth,1).getday()
}
//获取最后一天的星期
function getlastday(year,month) {
    let currentmonth = month - 1
    return new date(year,currentmonth,getlastdate(year,month)).getday()
}
//获取当月 日期数据 
function getdatearray(yearmonth) {
    let year = parseint(yearmonth.split('-')[0])
    let month = parseint(yearmonth.split('-')[1])
    let datearray = []
    let firstday =  getfirstday(year,month,1)
    let lastdate = getlastdate(year,month)
    let lastdateday = getlastday(year,month)
    let prevlastdate = getlastdate(year,month - 1)
    //缓存每一行数据
    let newarr = []
    //获取第一行数据
    for(let i=1;i<=7;i++){
        if(i<=firstday){
            newarr.push({
                date:'',
                value: prevlastdate - (firstday-i),
                enable: false,
                oper:{}
            })
            
        }
        else{
            newarr.push({
                date:new date(year,month-1,i-firstday).gettime(),
                value:i-firstday,
                enable: true,
                oper:{}
            })
        }
    }
    datearray.push(newarr) 
    newarr = [] //清空
    let count = 0
    for (let i=(7-firstday+1);i<=lastdate;i++){
        if ( count < 7){
            newarr.push({
                date:new date(year,month-1,i).gettime(),
                value:i,
                enable:true,
                oper:[]
            })
        }
        else{
            datearray.push(newarr)
            newarr = []
            newarr.push({
                date:new date(year,month-1,i).gettime(),
                value:i,
                enable:true,
                oper:[]
            })
            count = 0
        }
        if (i == lastdate && count == 6) {
            datearray.push(newarr)
        }
        count++
    }
    //获取最后一行
    newarr = []
    if(lastdateday<6){
        for(let i=0;i<=6;i++){
            if(i<=lastdateday){
                newarr.push({
                    date:new date(year,month-1,lastdate-(lastdateday-i)).gettime(),
                    value:lastdate-(lastdateday-i),
                    enable:true,
                    oper:[]
                })
            }
            else{
                newarr.push({
                    date:'',
                    value:i-lastdateday,
                    enable:false,
                    oper:[]
                })
            }
        }
        datearray.push(newarr) 
    }
    return datearray;
}

二、个性化日历使用

<calendar :operdata="operdata" @change="calendarchange" :title="title">
        <template slot-scope="slotscope">
            <div v-for="(item,index) in slotscope.oper " :key="index" class="calendar-oper">
               <div class="calendar-oper-tag" :style="{background:tagtype[item.type].color}">
                   <span>{{item.visittypecode}}</span>
               </div>
               <div class="calendar-oper-time">{{item.time}}</div>
               <div class="calendar-oper-content">{{item.content}}</div>
            </div>
        </template>
    </calendar>