自定义简洁的日历小组件
先上效果：
这个日历小组件是基于element-ui的日历组件来做的，但是我发现这个组件过于局限，竟然没有自由选择年份和月份的地方。
所以我就将element-ui里的日期选择和日历选择组合成了上图的效果，如果当前有日程的话，则会有一个小红点。
浮上此日期会显示当天日程的内容。每次切换月份则请求一次后台，拿到最新的日程数据。
代码如下：
v-model="selectDate" type="month" placeholder="选择月"> slot="dateCell" slot-scope="{date, data}"> {{dealMyDate(data.day,data)}} {{ data.day.split('-').slice(2).join('') }}
/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;
}
此组件创建的先后顺序
1.先调整样式
2.将日期选择和日历选择的v-model绑定为同一个
3.watch监听v-model，如果月份有变化，则触发父组件获取数据的方法，利用resDate进行回传
4.再将处理好的数据放在开放的slot,进行相要的展示。