# pc端个性化日历实现
程序员文章站
2022-04-09 17:12:43
pc端个性化日历实现 技术:vue = v for、slot scop 插槽域 需求:需要实现日历上每一天动态显示不同的信息 思路:运用vue 中 slot scop 插槽域的知识点,将个性化的代码样式放到slot中 再通过slot scop 获取这个插槽中的所需数据 一、实现日历组件 思路:布局上 ......
pc端个性化日历实现
技术:vue => v-for、slot-scop 插槽域 需求:需要实现日历上每一天动态显示不同的信息 思路:运用vue 中 slot-scop 插槽域的知识点,将个性化的代码样式放到slot中 再通过slot-scop 获取这个插槽中的所需数据
一、实现日历组件
思路:布局上就是一个7列,行数不确定的表格。只不过,日历的表格是宽和高相等,随着浏览器的大小变化,表格大大小也要变化,所以要用padding布局,难点在日期数组的生成上面。 1.布局的实现 <div class="calendar"> <div class="calendar-operation"> <span class="calendar-title">{{title}}</span> <div class="calendar-yearmonth"> <icon type="ios-arrow-back" style="margin-right:30px;" @click="prev" /> <div class="calendar-yearmonth-content">{{yearmonth}}</div> <icon type="ios-arrow-forward" style="margin-left:30px;color:" @click="next" /> </div>**** </div> <div class="calendar-head"> <div class="calendar-head-item">星期日</div> <div class="calendar-head-item">星期一</div> <div class="calendar-head-item">星期二</div> <div class="calendar-head-item">星期三</div> <div class="calendar-head-item">星期四</div> <div class="calendar-head-item">星期五</div> <div class="calendar-head-item">星期六</div> </div> <div class="calendar-content"> <div v-for="(item,index) in datearray" :key="index" class="calendar-row"> <div v-for="(val,key) in item" :key="key" :class="{'calendar-cols':true,'calendar-enable':!val.enable}"> <span class="calendar-cols-content">{{val.value}}</span> <div class="calendar-cols-opera" > <div style="height:100%;"> <slot :oper = 'val.oper'></slot> </div> </div> </div> </div> </div> </div> <style scoped lang="less"> .calendar{ width:100%; border:1px solid #e8eaec; border-left: 0; border-radius: 8px; background: #fff; .calendar-operation { height: 60px; border-bottom: 1px solid #e8eaec; border-left:1px solid #e8eaec; .calendar-title{ display:block; font-size:12px; color:#fb9153; float: left; height: 100%; line-height:60px; padding-left: 40px; } .calendar-yearmonth{ display: flex; height: 100%; justify-content: center; align-items: center; font-size:17px; color: #fb9153; } } .calendar-head { display: flex; height:40px; border-bottom: 1px solid #e8eaec; border-left:1px solid #e8eaec; .calendar-head-item { flex: 1; height:100%; line-height:40px; font-size: 12px; text-align: center; border-left: 1px solid #e8eaec; } } .calendar-content { width: 100%; .calendar-row{ width:100%; display: flex; .calendar-cols { position: relative; flex: 1; height: 0; padding-bottom: 14%; border-bottom: 1px solid #e8eaec; border-left: 1px solid #e8eaec; .calendar-cols-content{ display:block; text-align: right; height:0; padding-bottom: 15%; box-sizing: border-box; padding: 0 10px; margin-bottom: 15%; } .calendar-cols-opera{ width:100%; height: 0; padding-bottom: 84%; box-sizing: border-box; overflow-y: auto; } } } .calendar-enable{ color: #e8eaec; } } } </style> 2.日历数组的实现 思路:获取当前月有多少天,当月第一天对应的星期。 实现:如何获取这个月的天数,通过下一个月的第一天 减去一天时间就是这个月的最后一天,进而能知道这个月的天数 //获取当月最后一天 function getlastdate(year,month) { let currentmonth = month - 1 let nextmonth = currentmonth + 1 if(nextmonth > 11 ) { nextmonth = 0 year++ } //let nextmonthfisrtdate = new date(year,nextmonth,1).getdate() let lastdate = new date(new date(year,nextmonth,1).gettime() - 1000*60*60*24).getdate() return lastdate } //获取当月第一天对应的星期 function getfirstday(year,month) { let currentmonth = month - 1 return new date(year,currentmonth,1).getday() } //获取最后一天的星期 function getlastday(year,month) { let currentmonth = month - 1 return new date(year,currentmonth,getlastdate(year,month)).getday() } //获取当月 日期数据 function getdatearray(yearmonth) { let year = parseint(yearmonth.split('-')[0]) let month = parseint(yearmonth.split('-')[1]) let datearray = [] let firstday = getfirstday(year,month,1) let lastdate = getlastdate(year,month) let lastdateday = getlastday(year,month) let prevlastdate = getlastdate(year,month - 1) //缓存每一行数据 let newarr = [] //获取第一行数据 for(let i=1;i<=7;i++){ if(i<=firstday){ newarr.push({ date:'', value: prevlastdate - (firstday-i), enable: false, oper:{} }) } else{ newarr.push({ date:new date(year,month-1,i-firstday).gettime(), value:i-firstday, enable: true, oper:{} }) } } datearray.push(newarr) newarr = [] //清空 let count = 0 for (let i=(7-firstday+1);i<=lastdate;i++){ if ( count < 7){ newarr.push({ date:new date(year,month-1,i).gettime(), value:i, enable:true, oper:[] }) } else{ datearray.push(newarr) newarr = [] newarr.push({ date:new date(year,month-1,i).gettime(), value:i, enable:true, oper:[] }) count = 0 } if (i == lastdate && count == 6) { datearray.push(newarr) } count++ } //获取最后一行 newarr = [] if(lastdateday<6){ for(let i=0;i<=6;i++){ if(i<=lastdateday){ newarr.push({ date:new date(year,month-1,lastdate-(lastdateday-i)).gettime(), value:lastdate-(lastdateday-i), enable:true, oper:[] }) } else{ newarr.push({ date:'', value:i-lastdateday, enable:false, oper:[] }) } } datearray.push(newarr) } return datearray; }
二、个性化日历使用
<calendar :operdata="operdata" @change="calendarchange" :title="title"> <template slot-scope="slotscope"> <div v-for="(item,index) in slotscope.oper " :key="index" class="calendar-oper"> <div class="calendar-oper-tag" :style="{background:tagtype[item.type].color}"> <span>{{item.visittypecode}}</span> </div> <div class="calendar-oper-time">{{item.time}}</div> <div class="calendar-oper-content">{{item.content}}</div> </div> </template> </calendar>
下一篇: s21day13 python笔记