沃梦达 / IT编程 / 前端开发 / 正文

基于vue手写仿钉钉 滑动日历

前端开发
2023-10-08

template：div id=calendar_content class=calendar_content @touchstart=handleStart @touchmove=handleMove @touchend=handleEnddiv id=calendar_content_wrapper_prev class=calendar_content_wr...

template：

　　

<div id="calendar_content" class="calendar_content" @touchstart="handleStart" @touchmove="handleMove" @touchend="handleEnd">
　　<div id="calendar_content_wrapper_prev" class="calendar_content_wrapper prev">
　　　　<div class="week_wrap" v-for="(week, index) in prevDaysArr" :key="index">
　　　　　　<div class="day_wrap" v-for="(day, indexDay) in week" :key="indexDay" :class="[6, 7].includes(day.week) ? 'rest_day' : ''">
　　　　　　　　<div @click="changeActiveDay(day)">
　　　　　　　　　　<p class="day_text" :class="activeDay === day.timeStr ? 'active_day' : ''">{{day.timeStr ? new Date(day.timeStr).getDate() : ''}}</p>
　　　　　　　　</div>
　　　　　　　　<template v-if="day.id">
　　　　　　　　　　<span v-if="day.status == 0" class="normalCircle"></span>
　　　　　　　　　　<span v-else class="abnormalCircle"></span>
　　　　　　　　</template>
　　　　　　</div>
　　　　</div>
　　</div>
　　<div id="calendar_content_wrapper" class="calendar_content_wrapper middle">
　　　　<div class="week_wrap" v-for="(week, index) in daysArr" :key="index">
　　　　　　<div class="day_wrap" v-for="(day, indexDay) in week" :key="indexDay" :class="[6, 7].includes(day.week) ? 'rest_day' : ''">
　　　　　　　　<div @click="changeActiveDay(day)">
　　　　　　　　　　<p class="day_text" :class="activeDay === day.timeStr ? 'active_day' : ''">{{day.timeStr ? new Date(day.timeStr).getDate() : ''}}</p>
　　　　　　　　</div>
　　　　　　　　<template v-if="day.id">
　　　　　　　　　　<span v-if="day.status == 0" class="normalCircle"></span>
　　　　　　　　　　<span v-else class="abnormalCircle"></span>
　　　　　　　　</template>
　　　　　　</div>
　　　　</div>
　　</div>
　　<div id="calendar_content_wrapper_next" class="calendar_content_wrapper next">
　　　　<div class="week_wrap" v-for="(week, index) in nextDaysArr" :key="index">
　　　　　　<div class="day_wrap" v-for="(day, indexDay) in week" :key="indexDay" :class="[6, 7].includes(day.week) ? 'rest_day' : ''">
　　　　　　　　<div @click="changeActiveDay(day)">
　　　　　　　　　　<p class="day_text" :class="activeDay === day.timeStr ? 'active_day' : ''">{{day.timeStr ? new Date(day.timeStr).getDate() : ''}}</p>
　　　　　　　　</div>
　　　　　　　　<template v-if="day.id">
　　　　　　　　　　<span v-if="day.status == 0" class="normalCircle"></span>
　　　　　　　　　　<span v-else class="abnormalCircle"></span>
　　　　　　　　</template>
　　　　　　</div>
　　　　</div>
　　</div>
</div>

data: 

            nowDay: '',
            nowWeekDay: '',
            prevDaysArr: [],
            daysArr: [],
            nextDaysArr: [],
            activeDay: '',
            activeDayInfo: {},// 坐标
            startClientX: '',
            isReset: false,

 

methods： 

// 组装查询月份的数组
assembleDayArr (key, date) {
　　let allDays = this.getMonthDay(date || this.nowDay);
　　// 查询每周一的下标
　　let indexArr = [];
　　allDays.map((val, index) => {
　　　　if(val.week === 1){
　　　　　　indexArr.push(index);
　　　　}
　　});
　　// 如果第一天正好是 周一 则剔除indexArr[0]
　　if(indexArr[0] === 0){
　　　　indexArr.splice(0, 1);
　　};
　　// 查询有几周
　　let weeks = indexArr.length + 1;
　　// 将 每周塞进数组
　　let arr = [];
　　for(let i = 0;i < weeks;i++){
　　　　if(i === 0){
　　　　　　arr[i] = allDays.slice(0, indexArr[0]);
　　　　}else{
　　　　　　arr[i] = allDays.slice(indexArr[i-1], indexArr[i]);
　　　　}
　　　　if(arr[i].length < 7 && arr[i][0].week === 1){
　　　　　　let diff = 7 - arr[i].length;
　　　　　　for(let j = 0;j < diff;j++){
　　　　　　　　arr[i].push({});
　　　　　　}
　　　　}else if(arr[i].length < 7 && arr[i][0].week !== 1){
　　　　　　let diff = 7 - arr[i].length;
　　　　　　for(let j = 0;j < diff;j++){
　　　　　　　　arr[i].unshift({});
　　　　　　}
　　　　}
　　};
　　this[key] = arr;
},
// 选中日期改变事件
changeActiveDay (day) {
　　if(day.timeStr && day.timeStr !== this.activeDayInfo.timeStr){
　　　　this.activeDay = day.timeStr;
　　　　this.activeDayInfo = {...day};
　　　　this.nowDay = day.timeStr;
　　　　this.nowWeekDay = this.findNowWeek();
　　}
},
// 头部时间修改
changeMonth (flag, key) {
　　let resultMonth;
　　let nowChooseMonth = new Date(this.nowDay).getMonth();
　　if(flag === 'reduce'){
　　　　resultMonth = new Date(this.nowDay).setMonth(nowChooseMonth - 1, 1);
　　}else {
　　　　resultMonth = new Date(this.nowDay).setMonth(nowChooseMonth + 1, 1);
　　　　if(resultMonth > new Date().getTime()){
　　　　　　this.$toast.fail('不能选择未来月份');
　　　　　　return;
　　　　};
　　};
　　// 设置头部显示日期 查看是否是当前月份
　　if(dateFormat(new Date(), 'yyyy-MM') === dateFormat(new Date(resultMonth), 'yyyy-MM')){
　　　　this.nowDay = dateFormat(new Date(), 'yyyy-MM-dd');
　　}else{
　　　　this.nowDay = dateFormat(new Date(resultMonth), 'yyyy-MM-01');
　　};
　　this.activeDay = this.nowDay;
　　this.nowWeekDay = this.findNowWeek();
　　this.assembleDayArr(key || 'daysArr');
　　this.getList();
},
// 滑动开始
handleStart (e) {
　　this.startClientX = e.changedTouches[0].clientX;
},
// 滑动中
handleMove (e) {
　　e.preventDefault();
　　// isReset 防止过多次 计算前后数组;
　　if(!this.isReset && Math.abs(e.changedTouches[0].clientX - this.startClientX) > 1){
　　　　let nowChooseMonth = new Date(this.nowDay).getMonth();
　　　　let prevMonth = new Date(this.nowDay).setMonth(nowChooseMonth - 1);
　　　　let nextMonth = new Date(this.nowDay).setMonth(nowChooseMonth + 1);
　　　　this.assembleDayArr('prevDaysArr', dateFormat(new Date(prevMonth), 'yyyy-MM-dd'));
　　　　this.assembleDayArr('nextDaysArr', dateFormat(new Date(nextMonth), 'yyyy-MM-dd'));
　　　　this.isReset = true;
　　}
　　let dom = document.getElementById('calendar_content');
　　dom.style.marginLeft = (e.changedTouches[0].clientX - this.startClientX) + 'px';
},
// 滑动结束
handleEnd (e) {
　　let diffX = e.changedTouches[0].clientX - this.startClientX;
　　let dom = document.getElementById('calendar_content');
　　if(Math.abs(diffX) === 0){
　　　　return;
　　}
　　if(Math.abs(diffX) > 100){
　　　　if(diffX < 0){
　　　　　　let nowChooseMonth = new Date(this.nowDay).getMonth();
　　　　　　let resultMonth = new Date(this.nowDay).setMonth(nowChooseMonth + 1);
　　　　　　if(resultMonth > new Date().getTime()){
　　　　　　　　goBack(dom, diffX);
　　　　　　　　this.$toast.fail('不能选择未来月份');
　　　　　　　　return;
　　　　　　};
　　　　}
　　　　let animation = document.getElementById("calendar_content").animate([
　　　　　　{ marginLeft: `${diffX}px`},
　　　　　　{ marginLeft: diffX > 0 ? '7.5rem' : '-7.5rem'}
　　　　], {
　　　　　　duration: 500,
　　　　　　delay: 0
　　　　});
　　　　animation.play();
　　　　setTimeout(() => {
　　　　　　dom.style.marginLeft = 0;
　　　　　　if(diffX > 0){
　　　　　　　　this.changeMonth('reduce', 'daysArr');
　　　　　　};
　　　　　　if(diffX < 0){
　　　　　　　　this.changeMonth('plus', 'daysArr');
　　　　　　};
　　　　　　this.isReset = false;
　　　　}, 501);
　　}else{
　　　　goBack(dom, diffX);
　　};
　　// 回到远点 手指移动距离不超过100  以及 不能选择未来月份情况
　　function goBack (rDom, reference) {
　　　　let animation = document.getElementById("calendar_content").animate([
　　　　　　{ marginLeft: `${reference}px`},
　　　　　　{ marginLeft: 0}
　　　　], {
　　　　　　duration: 500,
　　　　　　delay: 0
　　　　});
　　　　animation.play();
　　　　setTimeout(() => {
　　　　　　rDom.style.marginLeft = 0;
　　　　}, 501)
　　}
},
// 返回文字 星期几
findNowWeek () {
　　let nowWeek = new Date(this.nowDay).getDay();
　　let weekInfo = {
　　　　0: '星期日',
　　　　1: '星期一',
　　　　2: '星期二',
　　　　3: '星期三',
　　　　4: '星期四',
　　　　5: '星期五',
　　　　6: '星期六',
　　};
　　return weekInfo[nowWeek];
},
// 获取 月份 对应的所有日期
getMonthDay (date) {
　　let now = new Date(date);
　　let current_month_num = this.mGetDate(date);
　　let current_month = [];
　　for (let i = 1; i <= current_month_num; i++) {
　　　　let day = now.setDate(i);
　　　　let everyDay = dateFormat(new Date(day), 'yyyy-MM-dd');
　　　　current_month.push({
　　　　　　timeStr: everyDay,
　　　　　　week: new Date(everyDay).getDay() === 0 ? 7 :new Date(everyDay).getDay(),
　　　　　　foreInfo: {},
　　　　　　afterInfo: {},
　　　　});
　　};
　　return current_month;
},
// 获取当前月的天数
mGetDate (date) {
　　var date = new Date(date);
　　var year = date.getFullYear();
　　var month = date.getMonth() + 1;
　　var d = new Date(year, month, 0);
　　return d.getDate();
},

 

css:

　　

        .calendar_content{
            position: relative;
            width: 22.5rem;
            // top: .6rem;
            left: -7.5rem;
            display: flex;
            .calendar_content_wrapper{
                flex: 1;
                &.prev{
                    left: 0;
                }
                &.middle{
                    left: 7.5rem;
                }
                &.next{
                    right: 0;
                }
            }
        }
        .week_wrap{
            display: flex;
            .day_wrap{
                flex: 1;
                &.rest_day{
                    color: #BABABA;
                }
                p{
                    margin: .1rem auto;
                    &.day_text{
                        width: .54rem;
                        height: .54rem;
                        line-height: .54rem;
                        border-radius: 100%;
                    }
                    &.active_day{
                        background: #3f6ad3;
                        color: white;
                    }
                }
            }
        }

 

本文标题为：基于vue手写仿钉钉 滑动日历

上一篇： vue websocket 发送消息
下一篇： vue项目结构分析
猜你喜欢
最新文章
热门文章
基础教程
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2