vue可ctrl,shift多选,可添加标记日历组件详细_vue.js_

const props = defineProps({ markList: {//标记 type: Array, default: (): any[] => { return []; }, }, month: { type: Date, required: true, }, disabled: { type: Boolean, default: false, }, disableBefore: {//禁用今天之前的日期 type: Boolean, default: true, }, }); const emits = defineEmits(['change']);

type CalendarDateCellType = 'next' | 'prev' | 'current' type CalendarDateCell = { text: number, type: CalendarDateCellType } const WEEK_DAYS = ref(["日", "一", "二", "三", "四", "五", "六"]); const currentMonth = computed(() => { return moment(props.month).format('M'); }) onMounted(() => { onKeyEvent(); }) const rows = computed(() => { let days: CalendarDateCell[] = [] const firstDay = moment(props.month).startOf("month").date(); // const endDay = moment(props.month).endOf('month').date();//当前月的最后一天 const firstDayOfWeek = moment(props.month).startOf("month").day(); // const daysInMonth = moment(props.month).daysInMonth();//当前月的天数 const prevMonthDays: CalendarDateCell[] = getPrevMonthLastDays( firstDay, firstDayOfWeek - firstDay ).map((day) => ({ text: 0,//上月补0 type: 'prev', })) const currentMonthDays: CalendarDateCell[] = getMonthDays(moment(props.month).daysInMonth()).map( (day) => ({ text: day, type: 'current', }) ) days = [...prevMonthDays, ...currentMonthDays] const remaining = 7 - (days.length % 7 || 7) const nextMonthDays: CalendarDateCell[] = rangeArr(remaining).map( (_, index) => ({ text: 0,//下月补0 type: 'next', }) ) days = days.concat(nextMonthDays) // console.log(currentMonth.value, firstDay, endDay, moment(props.month).startOf("month").day()); return toNestedArr(days) })

const getCellClass = (cell: CalendarDateCell, key: number) => { let date = getCellDate(cell); if (props.disableBefore && date.getTime() < new Date().getTime()) { return ['cell', 'cell_disabled'];//禁用 } let classes: string[] = ['cell', 'cell_enabled']; if (key == 0 || key == 6) {//周六、周日 classes.push('cell_red'); } let index = selectList.value.indexOf(moment(date).format('YYYY-MM-DD')); if (index != -1) { classes.push('cell_active');//选中 } return classes; }

.triangle { position: absolute; left: 0; top: 0; width: 0; height: 0; // border-top: 30px solid #e6e911; border-right: 30px solid transparent; }

const getCelltriangleStyle = (cell: CalendarDateCell) => { let date = getCellDate(cell); let day = props.markList.find(item => item.date == moment(date).format('YYYY-MM-DD')); return day ? { borderTop: '30px solid #e6e911', } : {}; }

const isCtrl = ref(false) const isShift = ref(false) const onKeyEvent = () => { window.addEventListener('keydown', e => { e.preventDefault();//取消默认事件 let e1 = e || window.event switch (e1.keyCode) { case 16: isShift.value = true; break; case 17: isCtrl.value = true; break; } }) window.addEventListener('keyup', e => { e.preventDefault(); let e1 = e || window.event switch (e1.keyCode) { case 16: isShift.value = false; break; case 17: isCtrl.value = false; break; } }) }

const selectList = ref([]);//已选择的 const shiftNum = ref(0);//shift复制的起始位置 const lastSelect = ref([]);//按住shift倒数第二次复制的 //遵循excel点击、ctrl、shift组合操作规范 const handlePickDay = (cell: CalendarDateCell) => { let date = getCellDate(cell); if (cell.type != 'current') { return; } if (props.disableBefore && date.getTime() < new Date().getTime()) { return } // console.log(isCtrl.value, isShift.value); let dateStr = moment(date).format('YYYY-MM-DD'); let currentSelect: string[] = []; //按住ctrl if (isCtrl.value) { if (selectList.value.includes(dateStr)) { selectList.value.splice(selectList.value.indexOf(dateStr), 1); } else { selectList.value.push(dateStr); } lastSelect.value = []; } else if (isShift.value) {//按住shift if (shiftNum.value == 0) {//无上次点击 shiftNum.value = cell.text; if (selectList.value.includes(dateStr)) { selectList.value.splice(selectList.value.indexOf(dateStr), 1); } else { selectList.value.push(dateStr); } } else { if (shiftNum.value < cell.text) { currentSelect = getDatesInRange(shiftNum.value, cell.text); } else if (shiftNum.value > cell.text) { currentSelect = getDatesInRange(cell.text, shiftNum.value); } else { currentSelect = [dateStr]; } selectList.value = selectList.value.filter(item => !lastSelect.value.includes(item));//移除上次按shift复制的 selectList.value = selectList.value.concat(currentSelect);//添加本次按shift复制的 lastSelect.value = currentSelect; } } else { selectList.value = [dateStr]; } if (!isShift.value) { shiftNum.value = cell.text; } selectList.value = [...new Set(selectList.value)].sort();//去重、排序 console.log(shiftNum.value, selectList.value); emits('change', selectList.value); }