先上效果：
这个日历小组件是基于element-ui的日历组件来做的，但是我发现这个组件过于局限，竟然没有自由选择年份和月份的地方。
所以我就将element-ui里的日期选择和日历选择组合成了上图的效果，如果当前有日程的话，则会有一个小红点。
浮上此日期会显示当天日程的内容。每次切换月份则请求一次后台，拿到最新的日程数据。
代码如下：
<template>
<div>
<el-date-picker
v-model="selectDate"
type="month"
placeholder="选择月">
</el-date-picker>
<el-calendar v-model="selectDate">
<template
slot="dateCell"
slot-scope="{date, data}">
<span>{{dealMyDate(data.day,data)}}</span>
<p :title='data.content'> <!--这里原本有动态绑定的class，去掉-->
{{ data.day.split('-').slice(2).join('') }}<br />
<i v-if='data.isShowContent'></i>
</p>
</template>
</el-calendar>
</div>
</template>
<script>
export default {
name:'miniCalendar',
props: {
resDate: {
default: [],
type: Array
},
},
data(){
return{
selectDate:'',
}
},
created(){
//渲染日程初始化月份
this.selectDate = new Date();
},
methods: {
dealMyDate(v,data) {
Object.assign(data,{isShowContent:false});
Object.assign(data,{content:''});
let len = this.resDate.length
let res = ""
for(let i=0; i<len; i++){
if(this.resDate[i].date == v) {
res= '';
Object.assign(data,{isShowContent:true});
Object.assign(data,{content:this.resDate[i].content});
break
}
}
return res
},
},
watch:{
selectDate:{
handler(val,old){
let date = new Date(val);
let date1 = new Date(old);
let yy = date.getFullYear();
let yy1 = date1.getFullYear();
let mm = (date.getMonth()+1)<10 ? '0'+(date.getMonth()+1) : (date.getMonth()+1);
let mm1 = (date1.getMonth()+1)<10 ? '0'+(date1.getMonth()+1) : (date1.getMonth()+1);
let mm2 = date.getMonth()+1;
//如果新值和旧值所在的月份相同，则不触发方法。
if((yy+'-'+mm)!=(yy1+'-'+mm1)){
this.$emit('watchChild',yy+'-'+mm,mm2);
}
},
deep:true
}
},
}
</script>
<style lang="less" scoped>
/deep/ .el-calendar__header{
padding: 0px 0px 10px 0px;
}
/deep/ .el-calendar-table .el-calendar-day{
height: 40px;
}
/deep/ .el-calendar-table td {
border-bottom: 0px solid #EBEEF5;
border-right: 0px solid #EBEEF5;
}
/deep/ .el-calendar-table tr td:first-child {
border-left: 0px solid #EBEEF5;
}
/deep/ .el-calendar-table tr:first-child td {
border-top: 0px solid #EBEEF5;
}
/deep/ .el-calendar__body {
border-top: 1px solid #EBEEF5;
padding: 5px;
p{
text-align: center;
i{
content: "";
display: inline-block;
width: 6px;
height: 6px;
background-color: #D0333C;
border-radius: 50%;
text-align: center;
}
}
}
/deep/.el-calendar__header{
border-bottom: 0px solid #EBEEF5;
.el-calendar__title{
display: none;
}
.el-calendar__button-group{
margin-left:10%;
}
}
/deep/ .el-input__inner{
line-height: 28px;
height: 28px;
width: 100%;
}
/deep/ .el-date-editor.el-input{
width:30%;
float: left;
.el-input__icon{
line-height: 28px;
}
}
/deep/ .el-input--suffix .el-input__inner {
padding-right: 0px;
}
/deep/ .el-input__suffix{
display: none;
}
div:hover {
color: #2c3e50;
}
</style>
此组件创建的先后顺序
1.先调整样式
2.将日期选择和日历选择的v-model绑定为同一个
3.watch监听v-model，如果月份有变化，则触发父组件获取数据的方法，利用resDate进行回传
4.再将处理好的数据放在开放的slot,进行相要的展示。