pc端个性化日历实现
1技术：vue => v-for、slot-scop 插槽域 2需求：需要实现日历上每一天动态显示不同的信息 3思路:运用vue 中 slot-scop 插槽域的知识点,将个性化的代码样式放到slot中 再通过slot-scop 获取这个插槽中的所需数据
一、实现日历组件
1思路:布局上就是一个7列，行数不确定的表格。只不过，日历的表格是宽和高相等，随着浏览器的大小变化，表格大大小也要变化，所以要用padding布局，难点在日期数组的生成上面。 21.布局的实现 3<div class="calendar"> 4 <div class="calendar-operation"> 5 <span class="calendar-title">{{title}}</span> 6 <div class="calendar-YearMonth"> 7 <Icon type="ios-arrow-back" style="margin-right:30px;" @click="prev" /> 8 <div class="calendar-YearMonth-content">{{YearMonth}}</div> 9 <Icon type="ios-arrow-forward" style="margin-left:30px;color:" @click="next" /> 10 </div>**** 11 </div> 12 <div class="calendar-head"> 13 <div class="calendar-head-item">星期日</div> 14 <div class="calendar-head-item">星期一</div> 15 <div class="calendar-head-item">星期二</div> 16 <div class="calendar-head-item">星期三</div> 17 <div class="calendar-head-item">星期四</div> 18 <div class="calendar-head-item">星期五</div> 19 <div class="calendar-head-item">星期六</div> 20 </div> 21 <div class="calendar-content"> 22 <div v-for="(item,index) in dateArray" :key="index" class="calendar-row"> 23 <div v-for="(val,key) in item" :key="key" :class="{'calendar-cols':true,'calendar-enable':!val.enable}"> 24 <span class="calendar-cols-content">{{val.value}}</span> 25 <div class="calendar-cols-opera" > 26 <div style="height:100%;"> 27 <slot :oper = 'val.oper'></slot> 28 </div> 29 </div> 30 </div> 31 </div> 32 </div> 33</div> 34<style scoped lang="less"> 35.calendar{ 36 width:100%; 37 border:1px solid #e8eaec; 38 border-left: 0; 39 border-radius: 8px; 40 background: #fff; 41 .calendar-operation { 42 height: 60px; 43 border-bottom: 1px solid #e8eaec; 44 border-left:1px solid #e8eaec; 45 .calendar-title{ 46 display:block; 47 font-size:12px; 48 color:#fb9153; 49 float: left; 50 height: 100%; 51 line-height:60px; 52 padding-left: 40px; 53 } 54 .calendar-YearMonth{ 55 display: flex; 56 height: 100%; 57 justify-content: center; 58 align-items: center; 59 font-size:17px; 60 color: #fb9153; 61 } 62 } 63 .calendar-head { 64 display: flex; 65 height:40px; 66 border-bottom: 1px solid #e8eaec; 67 border-left:1px solid #e8eaec; 68 .calendar-head-item { 69 flex: 1; 70 height:100%; 71 line-height:40px; 72 font-size: 12px; 73 text-align: center; 74 border-left: 1px solid #e8eaec; 75 } 76 } 77 .calendar-content { 78 width: 100%; 79 .calendar-row{ 80 width:100%; 81 display: flex; 82 .calendar-cols { 83 position: relative; 84 flex: 1; 85 height: 0; 86 padding-bottom: 14%; 87 border-bottom: 1px solid #e8eaec; 88 border-left: 1px solid #e8eaec; 89 .calendar-cols-content{ 90 display:block; 91 text-align: right; 92 height:0; 93 padding-bottom: 15%; 94 box-sizing: border-box; 95 padding: 0 10px; 96 margin-bottom: 15%; 97 } 98 .calendar-cols-opera{ 99 width:100%; 100 height: 0; 101 padding-bottom: 84%; 102 box-sizing: border-box; 103 overflow-y: auto; 104 } 105 } 106 } 107 .calendar-enable{ 108 color: #e8eaec; 109 } 110 } 111} 112</style> 1132.日历数组的实现 114 思路：获取当前月有多少天，当月第一天对应的星期。 115 实现：如何获取这个月的天数，通过下一个月的第一天 减去一天时间就是这个月的最后一天，进而能知道这个月的天数 116 //获取当月最后一天 117 function getLastDate(year,month) { 118 let currentMonth = month - 1 119 let nextMonth = currentMonth + 1 120 if(nextMonth > 11 ) { 121 nextMonth = 0 122 year++ 123 } 124 //let nextMonthFisrtDate = new Date(year,nextMonth,1).getDate() 125 let lastDate = new Date(new Date(year,nextMonth,1).getTime() - 1000*60*60*24).getDate() 126 return lastDate 127} 128//获取当月第一天对应的星期 129function getFirstDay(year,month) { 130 let currentMonth = month - 1 131 return new Date(year,currentMonth,1).getDay() 132} 133//获取最后一天的星期 134function getLastDay(year,month) { 135 let currentMonth = month - 1 136 return new Date(year,currentMonth,getLastDate(year,month)).getDay() 137} 138//获取当月 日期数据 139function getDateArray(yearMonth) { 140 let year = parseInt(yearMonth.split('-')[0]) 141 let month = parseInt(yearMonth.split('-')[1]) 142 let dateArray = [] 143 let firstDay = getFirstDay(year,month,1) 144 let lastDate = getLastDate(year,month) 145 let lastDateDay = getLastDay(year,month) 146 let prevLastDate = getLastDate(year,month - 1) 147 //缓存每一行数据 148 let newArr = [] 149 //获取第一行数据 150 for(let i=1;i<=7;i++){ 151 if(i<=firstDay){ 152 newArr.push({ 153 date:'', 154 value: prevLastDate - (firstDay-i), 155 enable: false, 156 oper:{} 157 }) 158 159 } 160 else{ 161 newArr.push({ 162 date:new Date(year,month-1,i-firstDay).getTime(), 163 value:i-firstDay, 164 enable: true, 165 oper:{} 166 }) 167 } 168 } 169 dateArray.push(newArr) 170 newArr = [] //清空 171 let count = 0 172 for (let i=(7-firstDay+1);i<=lastDate;i++){ 173 if ( count < 7){ 174 newArr.push({ 175 date:new Date(year,month-1,i).getTime(), 176 value:i, 177 enable:true, 178 oper:[] 179 }) 180 } 181 else{ 182 dateArray.push(newArr) 183 newArr = [] 184 newArr.push({ 185 date:new Date(year,month-1,i).getTime(), 186 value:i, 187 enable:true, 188 oper:[] 189 }) 190 count = 0 191 } 192 if (i == lastDate && count == 6) { 193 dateArray.push(newArr) 194 } 195 count++ 196 } 197 //获取最后一行 198 newArr = [] 199 if(lastDateDay<6){ 200 for(let i=0;i<=6;i++){ 201 if(i<=lastDateDay){ 202 newArr.push({ 203 date:new Date(year,month-1,lastDate-(lastDateDay-i)).getTime(), 204 value:lastDate-(lastDateDay-i), 205 enable:true, 206 oper:[] 207 }) 208 } 209 else{ 210 newArr.push({ 211 date:'', 212 value:i-lastDateDay, 213 enable:false, 214 oper:[] 215 }) 216 } 217 } 218 dateArray.push(newArr) 219 } 220 return dateArray; 221}
二、个性化日历使用
1<Calendar :operData="operData" @change="calendarChange" :title="title"> 2 <template slot-scope="slotScope"> 3 <div v-for="(item,index) in slotScope.oper " :key="index" class="calendar-oper"> 4 <div class="calendar-oper-tag" :style="{background:tagType[item.type].color}"> 5 <span>{{item.visitTypeCode}}</span> 6 </div> 7 <div class="calendar-oper-time">{{item.time}}</div> 8 <div class="calendar-oper-content">{{item.content}}</div> 9 </div> 10 </template> 11 </Calendar>