vue日历组件 切换月周日都可选择（记录-Vue移动端日历设计与实现）

<script> import { formatTime } from "@/utils/format"; export default { name: "calendar", props: { haveList: { type: Array, default: [], }, }, data() { return { // 切换日期选择 show: "date", // 日历头 header: ["日", "一", "二", "三", "四", "五", "六"], // 选择日期 date: [], // 年列表 yearList: [], // 天列表 dayList: [], // 定时器 timer: null, // 手势操作数据 move: { pageX: 0, fNum: null, lNum: null, }, // 第一天是周几 weeks: 0, }; }, created() {}, mounted() { let time = new Date(); this.date.push( time.getFullYear(), formatTime(time.getMonth() + 1), formatTime(time.getDate()) ); this.countDay(); }, methods: { // 计算显示的天数据 countDay() { console.log("chufa"); let [y, m, d] = this.date; // 获取第一天是周几 let week = new Date(`${y}/${m}/1`).getDay(), // 获取当前月的上个月多少天 lastDays = this.getDays(y, m - 1), // 获取这个月有多少天 days = this.getDays(y, m); // 计算这个月有多少周 this.weeks = Math.ceil((days - (7 - week)) / 7) + 1; // 将当前月份的天数生成数组 this.dayList = Array.from({ length: this.getDays(y, m) }, (v, k) => { return { day: formatTime(k + 1), month: m, year: y, }; }); // 将本月1日前的数据补齐 for (let i = lastDays; i > lastDays - week; i--) { this.dayList.unshift({ day: i, // 如果当前日期是1月补齐的是去年12月的数据 month: +m - 1 === 0 ? 12 : formatTime(+m - 1), year: +m - 1 === 0 ? y - 1 : y, }); } // 计算需要补齐多少天 let length = this.weeks * 7 - this.dayList.length; console.log("length", week, lastDays, days, this.weeks); // 将本月最后一天的数据补齐 for (let i = 1; i <= length; i++) { this.dayList.push({ day: i, // 如果当前日期是12月补齐的是明年年1月的数据 month: +m + 1 > 12 ? 1 : formatTime(+m + 1), year: +m + 1 > 12 ? y + 1 : y, }); } console.log(this.dayList); }, // 顶部时间点击事件 selectDate() { let type = { month: "year", date: "month", }; // 判断点击事件选择月份还是年份 if (this.show !== "year") { this.show = type[this.show]; } // 如果是月份就计算dateList数据 if (this.show === "month") { // 清空每页显示的年份数据 this.yearList.length = 0; // 计算页面显示的年份数据 每页显示12条数据 for (let i = this.date[0] - 4; i <= this.date[0] + 7; i++) { this.yearList.push(i); } } }, // 屏幕点击事件 touchStart(val) { // 获取按下屏幕的x轴坐标 this.move.pageX = val.touches[0].pageX; }, // 左右滑动切换事件 touchMove(val) { // 获取按下屏幕移动结束的x轴坐标 let move = val.touches[0].pageX; clearTimeout(this.timer); // 判断往左滑动还是往右滑动 // 滑动结束x轴坐标减去最初按下坐标为负数就是往左滑动,翻看当前日期以后的年份 if (move - this.move.pageX < -20) { console.log("右滑", this.move.lNum); // 定时器防抖 this.timer = setTimeout(this.changeYear("right"), 100); } // 滑动结束x轴坐标减去最初按下坐标为正数就是往右滑动,翻看当前日期以前的年份 if (move - this.move.pageX > 20) { // 定时器防抖 this.timer = setTimeout(this.changeYear("left"), 100); } }, // 年份选择切换 changeYear(type) { // 清空每页显示的年份数据 this.yearList.length = 0; if (type === "right") { // 计算页面显示的年份数据 每页显示12条数据 for (let i = this.move.lNum + 1; i < this.move.lNum + 13; i++) { this.yearList.push(i); } } else { for (let i = this.move.fNum - 12; i < this.move.fNum; i++) { this.yearList.push(i); } } }, // 年份点击事件 selectYear(val) { this.date[0] = val; this.show = "month"; }, // 月份点击事件 selectMonth(val) { this.date[1] = val; this.show = "date"; this.countDay(); this.checkDay(); }, // 校验选择的月份和已选择的日期是否匹配 checkDay() { // 获取选择的年月有多少天 防止这年不是闰年 就将日期跳转到28号,或者有的月份没有31号就跳到30号 let num = this.getDays(this.date[0], this.date[1]); if (num < this.date[2]) { this.date.splice(2, 1, num); } }, // 日期点击事件 selectDay(val) { let oVal = this.date[1]; this.date.splice(1, 2, val.month, val.day); if (val.month !== oVal) { this.countDay(); } this.$emit("change", this.date.join("-")); }, // 获取某个月有多少天 getDays(year, month) { // 一年中每个月的天数 let days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; // 判断是不是闰年 2月29天 if (year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0)) { days[1] = 29; } return days[month - 1]; }, //左右按钮点击事件 dateOperate(type) { let [y, m, d] = this.date; // 如果是向后翻 if (type === "up") { // 日期向后翻 切换月份 if (this.show === "date") { if (+m === 12) { this.date.splice(0, 1, y + 1); this.date.splice(1, 1, "01"); } else { this.date.splice(1, 1, formatTime(+m + 1)); } // 月份向后翻 切换年份 } else if (this.show === "month") { this.date.splice(0, 1, y + 1); // 年份向后翻 重组数据 } else { this.changeYear("right"); } // 如果是前后翻 } else { // 日期向前翻 切换月份 if (this.show === "date") { if (+m === 1) { this.date.splice(0, 1, y - 1); this.date.splice(1, 1, 12); } else { this.date.splice(1, 1, formatTime(+m - 1)); } // 月份向前翻 切换年份 } else if (this.show === "month") { this.date.splice(0, 1, y - 1); // 年份向前翻 重组数据 } else { this.changeYear("left"); } } this.countDay(); this.checkDay(); }, // 右侧按钮点击事件 weekReport(i) { if (i === 1) return; let arr = [], // 选择一周的数据 开始 s = 7 * (i - 1) - 7, // 结束 e = 7 * (i - 1); // 遍历日数据 截取选择的周数据 for (let k = s; k < e; k++) { arr.push( `${this.dayList[k].year}-${this.dayList[k].month}-${this.dayList[k].day}` ); } this.$emit("weekReport", arr); }, // 看月报事件 changeReport() { let [y, m, d] = this.date; this.$emit("changeReport", `${y}-${m}`); }, // 取消事件 cancel() { this.$emit("cancel"); }, }, computed: {}, watch: { yearList(nVal, oVal) { // 记录每一页显示的数据第一位和最后一位 用于计算下一页或者上一页的数据 this.move.fNum = nVal[0]; this.move.lNum = nVal[11]; }, deep: true, immediate: true, }, }; </script>