标签：vue 封装 日历 list month let year currentWeek
前言
因项目的需要，而且当前组件库并不支持业务，所以，重新对日历组件进行封装。该篇博客就对实现日历的思路进行存档，方便以后的查阅。
先上图：UI小哥哥的原型图。接下来的思路都是根据该图进行解说
逻辑
- 1.组件的拆分，分出哪些是业务，哪些是基础组件。
整体来说，这就是在日历的基础上添加业务，所以日历组件应该是基础组件，而业务应该是通过插槽插入进去的。那么，右上方的分入分出合计以及每个日历中的分入，分出都是需要插入的。其余的均是日历本身的功能。 - 2.那么接下来，我们先完成日历组件的封装，首先，我们要清楚，日历组件都需要完成哪些功能。功能如下
- 确定每个月1号对应的是周几，需要上个月补充几天，以及下个月补充几天。
当切换上个月，或者下个月的时候，日历面板能够重新渲染。
emmm...好像就没啥了 ，重点就是日期的渲染，没有很大的逻辑问题。也不知道为啥当初看到这个组件的时候 就是不太愿意✍实现步骤
- 日历的头部渲染，即日历的周一-周日渲染出来。这里使用flex布局即可。
- 日历的内容渲染，一个面板上应该是42个元素，包括上个月部分数据，当月整月数据，以及下个月部分数据。需要确定当月1号所在的位置，这样子，才能知道上个月以及下个月需要补充的天数，
- 页面的还原
<div class="calendar_main"> <!-- {{test}} --> <!-- 星期一~星期日的展示头，列表渲染固定的7个block --> <div class="main_block-head"> <div v-for="(column, col) in weekList" :key="col" class="weak-item"> {{column.label}} </div> </div> <!-- 相应的月份的日期展示区域，列表渲染 --> <div class="main_block"> <div v-for="(item, index) in totalDayList" :key="index" class="day-item" :class="item.className"> <div class="main-block_date" > <!-- 日期 --> {{item.day}} </div> <div> <template> <slot name="content" :data="item"></slot> </template> </div> </div> </div> </div>- 接下来定义每个月对应天数的数组，以及周一-周日日历头部的数组。
props: { showYear: { type: Number, default: '' }, showMonth: { type: Number, default: '' } }, data() { return { // 定义每个月对应的天数的数组 daysInMonth: [31, 28, 31,30 , 31, 30, 31,31, 30, 31, 30,31], // 星期的板块 weekList:[{ label: '周一', value: 1, }, { label: '周二', value: 2, }, { label: '周三', value: 3, }, { label: '周四', value: 4, }, { label: '周五', value: 5, },{ label: '周六', value: 6, }, { label: '周日', value: 7, }] }- 下面就需要对日历面板的数组进行操作了。年，月是从父组件传入的，当年，月发生改变的时候，日历面板的数据也随之发生改变。所以，日历面板的list通过计算属性来进行其变更以及页面的渲染。
totalDayList(val) { let list = []; // 定位找到选中月份初始的星期几 let {showMonth, showYear, daysInMonth} = val; // 判断当前是否是闰年 if(showYear%4 ===0 && showYear %100 === 0|| showYear%400 ===0) { this.daysInMonth[1] =29; }; // 对月份赋值 let month = showMonth; // 对年份赋值 let year = showYear; // 将日期进行拼接，拼接成每月1号的数据 let dateValue = year + '-' + month + '-' + '1'; // 确定当前日期在周几-0代表的是周日，1代表的是周一。。。。 let currentWeek = new Date(Date.parse(dateValue.replace(/-/g, '/'))).getDay(); // 根据当前日期，判定需要在前面补充几个日期，在后面补充几个日期 // 目的是补位：将前一个月的数据进行填充 // 获取上一个月的天数 let preList = this.preData(month, year,list, currentWeek, daysInMonth); // 将本月的数据进行渲染 let currentList = this.currentData(daysInMonth, year,month, list); // 目的是补充后面的位置，保证当前面板的数据完整 let nextList = this.nextData(list, year, month); list = [...nextList] return list }- 上个月的数据的渲染
preData(month, year,list, currentWeek, daysInMonth) { // 获取上一个月,存在跨年的情况，当当前月份是1月份的时候，上个月是去年的12月 let preMonth = month>1 ? month-1 :12; // 获取年份 year = month>1?year:year-1; // 获取上个月的天数 let preDays = daysInMonth[preMonth-1]; // 存放的每周对应需要补的天数 let fillNum = [6,0,1,2,3,4,5] // currentWeek=0，代表是周日，需要上个月补6天 // currentWeek=1, 代表是周一，需要上个月补0天 // currentWeek=2, 代表是周二，需要上个月补1天 // currentWeek=3. 代表是周三，需要上个月补2天 // currentWeek=4, 代表是周四，需要上个月补3天 // currentWeek=5, 代表是周五，需要上个月补4天 // currentWeek=6, 代表是周六，需要上个月补5天 for(let i = preDays; i>preDays-fillNum[currentWeek]; i--) { let obj = { type: 'prev', year, month: preMonth, day:i, className: 'pre_day' } list.push(obj); } list =list.reverse(); return list; },- 当月的数据渲染
currentData(daysInMonth, year,month, list ) { // 将本月的数据进行渲染 for(let i=0; i<daysInMonth[month-1];i++) { let obj = { year, day:i+1, type: 'current', className: 'current_day', month, } list.push(obj) } return list; },- 下个月的数据渲染
nextData(list, year, month) { // 该日历面板又42个模块 let nextNum = 42-list.length; if(nextNum>0) { for(let i=0; i<nextNum;i++) { let obj = { year, day: i+1, type: 'next', className: 'next_day', month: month+1 } list.push(obj) } } return list }总结：
日历的逻辑需要注意确定当月1号的位置，以及填充上个月，下个月的数据。记录一下 自己的逻辑思路。
标签：vue,封装,日历,list,month,let,year,currentWeek 来源： https://www.cnblogs.com/mn6364/p/12196969.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。