脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue ctrl shift

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

 更新时间：2022年09月26日 08:33:57   作者：江渚清沨  
这篇文章主要介绍了vue可ctrl,shift多选,可添加标记日历组件详细，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下

需要写一个日历组件有以下功能，element无法满足，自己造一个

只显示当前月日期,前后月日期不显示也不可选择;周六、周日颜色与工作日区分日期可以打标记（左上角标记）可ctrl+shift+鼠标左键多选

一、 按照 "日", "一", "二", "三", "四", "五", "六" 把一个月的日期排列

页面：

<template>
    <div class="calendar">
        <div class="calendar_header">{{currentMonth}}月</div>
        <table cellspacing="0" cellpadding="0" class="calendar_table">
            <thead>
                <th v-for="day in WEEK_DAYS" :key="day" :class="['thead_th',day=='六'||day=='日'?'thead_th_red':'']">
                    {{day}}</th>
            </thead>
            <tbody>
                <tr v-for="(row,index) in rows" :key="index">
                    <td v-for="(cell,key) in row" :key="key" class="td" @click="handlePickDay(cell)">
                        <div :class="getCellClass(cell,key)">
                            <div v-if="cell.type=='current'" class="triangle" :style="getCelltriangleStyle(cell)"></div>
                            <span class="cell_text">{{cell.text==0?'':cell.text}}</span>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

组件定义props、emits

const props = defineProps({
    markList: {//标记
        type: Array<any>,
        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',
    } : {};
}

三、单机、按住ctrl点击、按住shift点击事件处理

1.记录键盘按下ctrl、shift事件

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;
        }
    })
}

2.点击事件处理

const selectList = ref<any[]>([]);//已选择的
const shiftNum = ref(0);//shift复制的起始位置
const lastSelect = ref<any[]>([]);//按住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);
}

3.遵循excel点击的操作方式:

  • 未按ctrl、shift点击=>只选择当前点击的;
  • 按ctrl点击=>未选中则选中，已选中则取消选中;
  • 按住shift点击=>记录shift按下时点击位置-->再次点击时把期间内的选中,并移除倒数第二次的选中(否则都会选中,并在按下ctrl时释放上次选中)

四、组件代码:

<template>
    <div class="calendar">
        <div class="calendar_header">{{currentMonth}}月</div>
        <table cellspacing="0" cellpadding="0" class="calendar_table">
            <thead>
                <th v-for="day in WEEK_DAYS" :key="day" :class="['thead_th',day=='六'||day=='日'?'thead_th_red':'']">
                    {{day}}</th>
            </thead>
            <tbody>
                <tr v-for="(row,index) in rows" :key="index">
                    <td v-for="(cell,key) in row" :key="key" class="td" @click="handlePickDay(cell)">
                        <div :class="getCellClass(cell,key)">
                            <div v-if="cell.type=='current'" class="triangle" :style="getCelltriangleStyle(cell)"></div>
                            <span class="cell_text">{{cell.text==0?'':cell.text}}</span>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script lang="ts" setup>
import { ref, computed, onMounted } from "vue";
import moment from "moment";
const props = defineProps({
    markList: {//标记
        type: Array<any>,
        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 rangeArr = (n: number) => {
    return Array.from(Array.from({ length: n }).keys())
}
 
const toNestedArr = (days: CalendarDateCell[]) =>
    rangeArr(days.length / 7).map((index) => {
        const start = index * 7
        return days.slice(start, start + 7)
    });
const getPrevMonthLastDays = (lastDay: number, count: number) => {
    return rangeArr(count).map((_, index) => lastDay - (count - index - 1))
}
 
const getMonthDays = (days: number) => {
    return rangeArr(days).map((_, index) => index + 1)
}
/**
 * 获取范围期间所有日期
 * @ return array['YYYY-MM-DD']
 */
const getDatesInRange = (start: number, end: number): string[] => {
    let list = [];
    for (let i = start; i <= end; i++) {
        let dateStr = moment(getCellDate({ text: i, type: 'current' })).format('YYYY-MM-DD');
        list.push(dateStr);
    }
    return list;
}
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 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;
}
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 getCellDate = (cell: CalendarDateCell) => new Date(props.month.getFullYear(), props.month.getMonth(), cell.text)
 
const selectList = ref<any[]>([]);//已选择的
const shiftNum = ref(0);//shift复制的起始位置
const lastSelect = ref<any[]>([]);//按住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);
}
</script>
<style lang="scss" scoped>
.calendar {
    width: 100%;
    padding: 12px 20px 35px;
 
    &_header {
        display: flex;
        justify-content: center;
        border: 1px solid var(--el-border-color-lighter);
        padding: 12px 20px;
    }
 
    &_table {
        width: 100%;
 
        .thead_th {
            padding: 12px 0;
            color: var(--el-text-color-regular);
            font-weight: 400;
 
            &_red {
                color: red;
            }
        }
    }
 
    .td {
        border: 1px solid var(--el-border-color-lighter);
        -moz-user-select: none;
        /*火狐*/
        -webkit-user-select: none;
        /*webkit浏览器*/
        -ms-user-select: none;
        /*IE10*/
        -khtml-user-select: none;
        /*早期浏览器*/
        user-select: none;
    }
 
 
    .cell {
        // background-color: #409eff;
        position: relative;
        text-align: center;
        min-height: 50px;
        display: flex;
        justify-content: center;
 
        &_enabled {
            cursor: pointer;
            color: #373737
        }
 
        &_disabled {
            cursor: not-allowed;
            color: #9b9da1;
        }
 
        &_red {
            color: red;
        }
 
        &_active {
            background-color: #409eff;
        }
 
        .triangle {
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 0;
            // border-top: 30px solid #e6e911;
            border-right: 30px solid transparent;
        }
 
        &_text {
            margin: auto;
        }
    }
 
}
</style>

使用：

<Calendar :month="month" :markList="list" @change="onChange"></Calendar>

到此这篇关于vue可ctrl,shift多选,可添加标记的日历组件的文章就介绍到这了,更多相关vue ctrl shift内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue分页效果与购物车功能

    Vue分页效果与购物车功能

    这篇文章主要介绍了Vue分页效果与购物车功能,本文图文实例相结合给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-12-12
  • vue中数组常用的6种循环方法代码示例

    vue中数组常用的6种循环方法代码示例

    在vue项目开发中,我们需要对数组进行处理等问题,这里简单记录遍历数组的几种方法,这篇文章主要给大家介绍了关于vue中数组常用的6种循环方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • 如何在Vue3中正确使用ElementPlus,亲测有效,避坑

    如何在Vue3中正确使用ElementPlus,亲测有效,避坑

    这篇文章主要介绍了如何在Vue3中正确使用ElementPlus,亲测有效,避坑！具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式

    基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式

    本文讲述如何实现拥有酷炫背景视频的登录页面，浏览器窗口随意拉伸，背景视频及前景登录组件均能完美适配，背景视频可始终铺满窗口，前景组件始终居中，视频的内容始终得到最大限度的保留，可以得到最好的视觉效果
    2018-01-01
  • Vue3搭建组件库开发环境的示例详解

    Vue3搭建组件库开发环境的示例详解

    这篇文章给大家分享Vue3搭建组件库开发环境，给大家讲解依次搭建组件库、example、文档、cli，本文内容是搭建组件库的开发环境的过程，感兴趣的朋友跟随小编一起看看吧
    2022-11-11
  • vue踩坑记录:属性报undefined错误问题

    vue踩坑记录:属性报undefined错误问题

    这篇文章主要介绍了vue踩坑记录:属性报undefined错误问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • vue项目接入高德地图点击地图获取经纬度以及省市区功能

    vue项目接入高德地图点击地图获取经纬度以及省市区功能

    这篇文章主要给大家介绍了关于vue项目接入高德地图点击地图获取经纬度以及省市区功能的相关资料,开发中我们需要地图定位,就是用户输入位置,自动定位获取经纬度,需要的朋友可以参考下
    2023-08-08
  • 基于Vue的侧边目录组件的实现

    基于Vue的侧边目录组件的实现

    这篇文章主要介绍了基于Vue的侧边目录组件的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • 在vant中使用时间选择器和popup弹出层的操作

    在vant中使用时间选择器和popup弹出层的操作

    这篇文章主要介绍了在vant中使用时间选择器和popup弹出层的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue实现刷新当前页面的三种方式总结

    Vue实现刷新当前页面的三种方式总结

    项目当中如果做新增/修改/删除等等操作通常情况下都需要刷新数据或者刷新当前页面。本文为大家整理了三种不同的实现方法，需要的可以参考一下
    2023-01-01

最新评论