vue平铺日历组件之按住ctrl、shift键实现跨月、跨年多选日期的功能

  • vue平铺日历组件之按住ctrl、shift键实现跨月、跨年多选日期的功能已关闭评论
  • 105 次浏览
  • A+
所属分类:Web前端
摘要

已经好久没有更新过博客了,大概有两三年了吧,因为换了工作,工作也比较忙,所以也就没有时间来写技术博客,期间也一直想写,但自己又比较懒,就给耽误了。今天这篇先续上,下一篇什么时候写,我也不知道,随心所欲、随遇而安、安之若素、素不相识也就无所谓了吧。

已经好久没有更新过博客了,大概有两三年了吧,因为换了工作,工作也比较忙,所以也就没有时间来写技术博客,期间也一直想写,但自己又比较懒,就给耽误了。今天这篇先续上,下一篇什么时候写,我也不知道,随心所欲、随遇而安、安之若素、素不相识也就无所谓了吧。

一开始看到这个功能需求,我也很懵逼,因为从来没有做过啊,哈哈。。。但转念一想既然产品能提出这个需求,想必会有人实现过,就去网上查了查资料,果不其然,还真有人做过,但离我想要的效果还是差着十万八千里,所以按照网上大神的思路,结合我司的实际需求,自己就把它给捣鼓出来了。

其实刚做好的效果还是能实现产品的需求的,我就让同事帮忙测试一下看看有没有什么bug,因为我司对bug的要求以及对用户体验的要求还是很严格的,所以在同事的实际测试以及提醒下,后面我又参照电脑上基于ctrl、shift键来选中文件的实际效果做了改进,算是不给测试提bug的机会吧。

照旧先上两张最后实现的效果图:

vue平铺日历组件之按住ctrl、shift键实现跨月、跨年多选日期的功能
vue平铺日历组件之按住ctrl、shift键实现跨月、跨年多选日期的功能

先来看看实现单月的日期组件calendar.vue

<template>   <div class="tiled-calendar">     <div class="calendar-header">       <span :class="getWeekClass(year)">{{monthCN[month]}}月</span>     </div>     <ul class="calendar-week">       <li v-for="(item, index) in calendarWeek" :key="index" class="calendar-week-item" :class="getWeekClass(year, month + 1)">{{item}}</li>     </ul>     <ul class="calendar-body">       <li v-for="(item, index) in calendar" :key="index" class="calendar-day" @click="onDay(item)">         <template v-if="hasCurrentMonth">           <span class="calendar-day-item" :class="getCellClass(item, index)">{{item.day}}</span>         </template>         <template v-else>           <span class="calendar-day-item" :class="getCellClass(item, index)" v-if="isCurrentMonth(item.date)">{{item.day}}</span>         </template>       </li>     </ul>   </div> </template>  <script> import dayjs from 'dayjs' import { mapState, mapMutations } from 'vuex'  const monthCN = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二']  const getNewDate = date => {   const year = date.getFullYear()   const month = date.getMonth()   const day = date.getDate()    return { year, month, day } }  const getDate = (year, month, day) => new Date(year, month, day)  export default {   props: {     year: {       type: [String, Number],       default: 2023     },     month: {       type: [String, Number],       default: 0     },     // 是否在当月日历中展示上个月和下个月的部分日期,默认不展示。     hasCurrentMonth: {       type: Boolean,       default: false     },     // 休息日     weekendList: Array,     // 工作日     workList: {       type: Array,       default: () => []     },     // 既非工作日也非休息日     workRestOffList: Array   },   data () {     return {       calendarWeek: ['一', '二', '三', '四', '五', '六', '日'],       today: dayjs().format('YYYYMMDD'),       isCtrl: false,       isShift: false,       monthCN     }   },   computed: {     calendar () {       const calendatArr = []       const { year, month } = getNewDate(getDate(this.year, this.month, 1))        const currentFirstDay = getDate(year, month, 1)        // 获取当前月第一天星期几       const weekDay = currentFirstDay.getDay()       let startTime = null        if (weekDay === 0) {         // 当月第一天是星期天         startTime = currentFirstDay - 6 * 24 * 60 * 60 * 1000       } else {         startTime = currentFirstDay - (weekDay - 1) * 24 * 60 * 60 * 1000       }        // 为了页面整齐排列 一并绘制42天       for (let i = 0; i < 42; i++) {         calendatArr.push({           date: new Date(startTime + i * 24 * 60 * 60 * 1000),           year: new Date(startTime + i * 24 * 60 * 60 * 1000).getFullYear(),           month: new Date(startTime + i * 24 * 60 * 60 * 1000).getMonth() + 1,           day: new Date(startTime + i * 24 * 60 * 60 * 1000).getDate()         })       }        return calendatArr     },     ...mapState('d2admin', { selectedList: s => s.multiMarketCalendar.selectList })   },   mounted () {     this.onKeyEvent()   },   methods: {     ...mapMutations({ setSelectCalendar: 'd2admin/multiMarketCalendar/setSelectCalendar' }),     onKeyEvent () {       window.addEventListener('keydown', e => {         const _e = e || window.event         switch (_e.keyCode) {           case 16:             this.isShift = true             break           case 17:             this.isCtrl = true             break         }       })        window.addEventListener('keyup', e => {         const _e = e || window.event         switch (_e.keyCode) {           case 16:             this.isShift = false             break           case 17:             this.isCtrl = false             break         }       })     },     // 是否是当前月     isCurrentMonth (date) {       const { year: currentYear, month: currentMonth } = getNewDate(getDate(this.year, this.month, 1))       const { year, month } = getNewDate(date)       return currentYear === year && currentMonth === month     },     onDay (item) {       // 如果是同一年,当点击的月份小于当前系统日期的月份,则禁止点击。       if (item.year === new Date().getFullYear() && item.month < new Date().getMonth() + 1) {         return       }        // 如果是同一年又是同一个月,当点击的日期小于当前的日期,则禁止点击       if (item.year === new Date().getFullYear() && item.month === new Date().getMonth() + 1 && item.day < new Date().getDate()) {         return       }        // 如果点击的年份小月当前年份,则禁止点击。       if (item.year < new Date().getFullYear()) {         return       }        // 如果点击的日期不是那个月应有的日期(每个月的日期里边也会包含上个月和下个月的某几天日期,只是这些日期的颜色被置灰了),则禁止点击。       if (!this.isCurrentMonth(item.date)) {         return       }        const dateStr = dayjs(item.date).format('YYYYMMDD')       const { isCtrl, isShift } = this        // 按住ctrl       if (isCtrl && !isShift) {         this.setSelectCalendar({ dateStr, item, isCtrl })       } else if (isCtrl && isShift) { // 同时按住ctrl和shift         this.setSelectCalendar({ dateStr, item, isCtrl, isShift })       } else if (isShift && !isCtrl) { // 按住shift         this.setSelectCalendar({ dateStr, item, isShift })       } else { // 不按ctrl和shift,一次只能选择一个         this.setSelectCalendar({ dateStr, item })       }     },     getWeekClass (year, month) {       if (year < new Date().getFullYear()) return 'is-disabled'        if (year === new Date().getFullYear() && month < new Date().getMonth() + 1) return 'is-disabled'     },     getCellClass (item, idx) {       const { workList, weekendList, workRestOffList } = this       const date = dayjs(item.date).format('YYYYMMDD')       const today = `${item.year}${item.month < 10 ? '0' + item.month : item.month}${item.day < 10 ? '0' + item.day : item.day}`        // 被选中的日期       const index = this.selectedList.indexOf(date)        if (index !== -1) {         // 如果选中的日期是当年日期的周六周日,且这些日期不是工作日,则在选中时还是要保留它原来的红色字体,如果是工作日,则在选中时就不能再展示成红色字体了。         if ((idx % 7 === 5 || idx % 7 === 6) && this.isCurrentMonth(item.date) && item.year >= new Date().getFullYear() && !(workList.length && workList.includes(date))) {           return 'is-selected is-weekend'         } else if (weekendList.length && weekendList.includes(date)) { // 休息日的选中(非周六周日的休息日)           return 'is-selected is-weekend'         } else if (workRestOffList.length && workRestOffList.includes(date)) { // 异常日期的选中           return 'is-selected is-workRestOff'         } else {           return 'is-selected'         }       }        // 默认显示当前日期       if (today === this.today) {         // 如果把当前日期也置为休息日,则也是要将当前日期标红         if (weekendList.length && weekendList.includes(date)) {           return 'is-today is-weekend'         }          // 异常日期         if (workRestOffList.length && workRestOffList.includes(date)) {           return 'is-today is-workRestOff'         }          return 'is-today'       }        // 如果日期不是那个月应有的日期(每个月的日期里边也会包含上个月和下个月的某几天日期,只是这些日期的颜色被置灰了),则禁止点击。       // if (!this.isCurrentMonth(item.date)) {       //   return 'is-disabled'       // }        // 如果是同一年,当月份小于当前系统日期的月份,则禁止点击。       if (item.year === new Date().getFullYear() && item.month < new Date().getMonth() + 1) {         // 周六周日被设置成了工作日         if ((idx % 7 === 5 || idx % 7 === 6) && (workList.length && workList.includes(date))) {           return 'is-disabled is-work'         }          // 异常日期         if (workRestOffList.length && workRestOffList.includes(date)) {           return 'is-disabled is-workRestOff'         }          // 周六周日标红         if (idx % 7 === 5 || idx % 7 === 6 || (weekendList.length && weekendList.includes(date))) {           return 'is-disabled is-weekend'         }          return 'is-disabled'       }        // 如果是同一年又是同一个月,当日期小于当前的日期,则禁止点击       if (item.year === new Date().getFullYear() && item.month === new Date().getMonth() + 1 && item.day < new Date().getDate()) {         // 周六周日被设置成了工作日         if ((idx % 7 === 5 || idx % 7 === 6) && (workList.length && workList.includes(date))) {           return 'is-disabled is-work'         }          // 异常日期         if (workRestOffList.length && workRestOffList.includes(date)) {           return 'is-disabled is-workRestOff'         }          // 周六周日标红         if (idx % 7 === 5 || idx % 7 === 6 || (weekendList.length && weekendList.includes(date))) {           return 'is-disabled is-weekend'         }          return 'is-disabled'       }        // 如果年份小月当前年份,则禁止点击。       if (item.year < new Date().getFullYear()) {         // 周六周日被设置成了工作日         if ((idx % 7 === 5 || idx % 7 === 6) && (workList.length && workList.includes(date))) {           return 'is-disabled is-work'         }          // 异常日期         if (workRestOffList.length && workRestOffList.includes(date)) {           return 'is-disabled is-workRestOff'         }          // 周六周日标红         if (idx % 7 === 5 || idx % 7 === 6 || (weekendList.length && weekendList.includes(date))) {           return 'is-disabled is-weekend'         }          return 'is-disabled'       }        // 周六周日标红       if ((idx % 7 === 5 || idx % 7 === 6) && this.isCurrentMonth(item.date) && item.year >= new Date().getFullYear()) {         // 周六周日被设置成了工作日,则不标红         if (workList.length && workList.includes(date)) {           return 'is-work'         }          if (workRestOffList.length && workRestOffList.includes(date)) {           return 'is-workRestOff'         }          return 'is-weekend'       }        // 休息日标红       if (weekendList.length && weekendList.includes(date)) {         return 'is-weekend'       }        // 既非工作日也非休息日       if (workRestOffList.length && workRestOffList.includes(date)) {         return 'is-workRestOff'       }     }   },   beforeDestroy() {     window.removeEventListener('keydown')     window.removeEventListener('keyup')   } } </script>  <style lang="scss" scoped> .calendar-header, .calendar-week{   user-select: none;   .is-disabled{     cursor: not-allowed;     opacity: 0.5;   } } .tiled-calendar {   height: 100%;   box-sizing: border-box;   margin: 0 20px 10px;   font-size: 14px;   ul, li{     margin: 0;     padding: 0;   }   .calendar-header {     border-bottom: 1px solid #EDEEF1;     padding: 8px 0;     color: #1B1F26;     text-align: center;     margin-bottom: 8px;   }   .calendar-week {     display: flex;     height: 28px;     line-height: 28px;     border-right: none;     border-left: none;     margin-bottom: 2px;     .calendar-week-item {       list-style-type: none;       width: 14.28%;       text-align: center;       color: #737985;     }   }   .calendar-body {     display: flex;     flex-wrap: wrap;     margin-top: 5px;     .calendar-day {       width: 14.28%;       text-align: center;       height: 34px;       line-height: 34px;       position: relative;       display: flex;       justify-content: center;       align-items: center;       .calendar-day-item {         display: block;         width: 26px;         height: 26px;         line-height: 26px;         border-radius: 50%;         cursor: pointer;         user-select: none;         color: #1B1F26;         &:hover{           background: rgba(69, 115, 243, .12);         }       }       .is{         &-today, &-selected{           border: 1px solid #E60012;           &:hover{             background: rgba(69, 115, 243, .12);           }         }         &-selected {           border: 1px solid #4573F3;           &:hover{             background: none;           }         }         &-disabled{           cursor: not-allowed;           color:#9E9E9E;           &:hover{             background: none;           }         }         &-weekend{           color: #E60012;         }         &-workRestOff{           color: #FF7D00;         }         &-disabled{           &.is-workRestOff{             color: rgba(255, 125, 0, .4)           }         }         &-disabled{           &.is-weekend{             color: rgba(230, 0, 18, .4)           }         }         &-work{           color: #1B1F26;         }         &-disabled.is-work{           color: #9E9E9E         }       }     }   } } </style> 

从以上也能看出,我们的需求还是很复杂的,比如,历史日期也就是所谓的过期的日期不能被选中,周六周日的日期要标红,还可以把工作日置为休息日,休息日置为工作日等等。这些功能说起来就一句话,可要实现出来,那可就属实太复杂了。

对了,在实现的过程中,我还使用到了vuex来保存点击选中的数据calendar.js:

let selectList = [] let shiftData = null let shiftDate = '' let currentSelect = [] let lastSelect = []  // 获取两个日期中间的所有日期 const getBetweenDay = (starDay, endDay) => {   var arr = []   var dates = []    // 设置两个日期UTC时间   var db = new Date(starDay)   var de = new Date(endDay)    // 获取两个日期GTM时间   var s = db.getTime() - 24 * 60 * 60 * 1000   var d = de.getTime() - 24 * 60 * 60 * 1000    // 获取到两个日期之间的每一天的毫秒数   for (var i = s; i <= d;) {     i = i + 24 * 60 * 60 * 1000     arr.push(parseInt(i))   }    // 获取每一天的时间  YY-MM-DD   for (var j in arr) {     var time = new Date(arr[j])     var year = time.getFullYear(time)     var mouth = (time.getMonth() + 1) >= 10 ? (time.getMonth() + 1) : ('0' + (time.getMonth() + 1))     var day = time.getDate() >= 10 ? time.getDate() : ('0' + time.getDate())     var YYMMDD = year + '' + mouth + '' + day     dates.push(YYMMDD)   }    return dates }  const shiftSelect = (dateStr, item) => {   if (!shiftData) {     shiftData = item.date     shiftDate = `${item.year}-${item.month}-${item.day}`     // 如果当前日期已选中,再次点击当前日期就取消选中。     if (selectList.includes(dateStr)) {       selectList.splice(selectList.indexOf(dateStr), 1)     } else {       selectList.push(dateStr)     }   } else {     if (shiftData < item.date) {       currentSelect = getBetweenDay(shiftDate, `${item.year}-${item.month}-${item.day}`)     } else if (shiftData > item.date) {       currentSelect = getBetweenDay(`${item.year}-${item.month}-${item.day}`, shiftDate)     } else {       currentSelect = [dateStr]     }      selectList = selectList.filter(item => !lastSelect.includes(item)) // 移除上次按shift复制的     selectList = selectList.concat(currentSelect) // 添加本次按shift复制的     lastSelect = currentSelect   } }  export default {   namespaced: true,   state: {     selectList: []   },   mutations: {     setSelectCalendar (s, { dateStr, item, isCtrl, isShift }) {       // 按住ctrl       if (isCtrl && !isShift) {         // 如果当前日期已选中,再次点击当前日期就取消选中。         if (selectList.includes(dateStr)) {           selectList.splice(selectList.indexOf(dateStr), 1)         } else {           selectList.push(dateStr)         }        // 加上lastSelect = []这个就会在shift连续选了多个后,再按住ctrl键取消已选中的日期的中间的几个后,下次再按住       // shift多选时,就会从按住ctrl取消选中的最后一个日期开始连续选择,但刚才取消已选中的那些日期       // 之前的已经选中的日期依旧处于选中状态,与电脑自身的按住shift键多选的效果略有不同,所以要注释掉这串代码。       // lastSelect = []  // 最开始这串代码是放开的       } else if (isShift && !isCtrl) {         // 加上selectList = []可以实现按住ctrl单选几个不连续的日期后,再按住shift键连选其他日期,就可以把之前         // 按住ctrl键单选的其他日期都取消选中。不加selectList = []是可以在按住shift键连选其他日期时同时保留之前         // 按住ctrl键单选的其他日期。         selectList = [] // 最开始这串代码是没有的          shiftSelect(dateStr, item)       } else if (isCtrl && isShift) { // 同时按住ctrl和shift         lastSelect = []         shiftSelect(dateStr, item)       } else { // 不按ctrl和shift,一次只能选择一个         selectList = [dateStr]       }        if (!isShift) {         shiftData = item.date         shiftDate = `${item.year}-${item.month}-${item.day}`       }        selectList = [...new Set(selectList)].sort() // 去重、排序        s.selectList = selectList     },     setSelectEmpty (s) {       selectList = []       shiftData = null       shiftDate = ''       currentSelect = []       lastSelect = []       s.selectList = []     }   } } 

再来看看在以上单个日期组件的基础上实现1年12个月日历平铺的代码吧:

<template>   <div class="material-calendar-parent">     <el-date-picker v-model="year" type="year" placeholder="选择年" @change="onChange" />     <el-row :gutter="10">       <el-col :span="6" v-for="(n, i) in 12" :key="i">         <Calendar :year="year.getFullYear()" :month="i" :key="n" :workList="workList" :weekendList="weekendList" :workRestOffList="workRestOffList" />       </el-col>     </el-row>   </div> </template>  <script> import Calendar from './calendar'  export default {   components: { Calendar },   data(){     return {       year: new Date(),       workList: ['20220206', '20230107', '20230311'],       weekendList: [{date: '20220118', market: '马来西亚,泰国'}, {date: '20230123', market: '中国澳门,韩国'}, {date: '20230213', market: '中国香港,美国'}, {date: '20230313', market: '中国台湾,法国'}],       workRestOffList: ['20220101', '20220105', '20230101', '20230105', '20230218', '20230322', '20230330'],     }   },   methods: {     onChange(v){       this.year = v     }   } } </script>  <style lang="scss"> .material-calendar-parent{   .el-col{     border-right: 1px solid #eee;     border-bottom: 1px solid #eee;   } } </style> 

写到这里就不准备再往下写了,所有的代码都贴出来了。如果你想要的效果跟我的这个不太一样,你自己在这个基础上改吧改吧应该就可以用了。其实最关键的部分也就是那个按住ctrl、shift键实现跨月、跨年多选日期,理解了这个原理,其余的实现部分尽管复杂但并不难。