实现效果:
需求:
1、按钮组文字改成左右箭头,按钮位置改变
2、自定义颜色
PS:position-absolute、position-relative是全局定义的关于定位有关样式
pl、pr、pt、pb、ml、mr、mt、mb是全局定义的关于padding和margin有关样式
具体间距需要自行调整
<el-card
style="width: 350px; height: 338px; border-radius: 10px"
class="position-relative"
>
<div class="position-absolute btn-style">
<el-button
class="today-btn"
@click="calendarValue = Date.now()"
>今</el-button
>
</div>
<p class="pl-2 mt-2 mb-1">日历</p>
<el-calendar
ref="calendar"
v-model="calendarValue"
style="--el-calendar-border: none !important"
>
</el-calendar>
</el-card>
data数据
calendarValue: new Date()
css样式
/deep/.el-card__body {
padding: 0;
}
// 今日按钮样式
.btn-style {
top: 52px;
left: 115px;
.today-btn {
padding: 0px;
width: 32px;
height: 22px;
line-height: 5px;
color: #000;
background: #ffffff;
border-radius: 4px;
font-size: 12px;
border: 1px solid #d9d9d9;
}
}
// 上个月、下个月按钮样式
::v-deep .el-button-group > .el-button:first-child:before {
content: '<';
}
::v-deep .el-button-group > .el-button:last-child:before {
content: '>';
}
::v-deep .el-button-group > .el-button:not(:first-child):not(:last-child) {
color: #444444;
}
::v-deep .el-button-group > .el-button:first-child span,
::v-deep .el-button-group > .el-button:last-child span {
display: none;
}
::v-deep .el-button-group > .el-button:not(:last-child) {
margin-right: -15px;
}
::v-deep .el-button-group > .el-button:first-child:before,
::v-deep .el-button-group > .el-button:last-child:before {
width: 16px;
height: 16px;
color: #444444;
}
// 去除文字
::v-deep .el-button-group > .el-button:not(:first-child):not(:last-child) {
span {
display: none;
}
}
::v-deep .el-button-group > .el-button {
border: 0;
background: transparent;
}
/deep/.el-calendar-table__row td {
// 去掉边框
border: none !important;
// 缩小高度
.el-calendar-day {
height: 32px;
line-height: 18px;
// 设置居中
text-align: center;
}
}
// 自定义选中、悬浮颜色
::v-deep .el-calendar-table .el-calendar-day:hover {
color: #fff;
background-color: #ff5e79 !important;
}
::v-deep .el-calendar-table .is-today {
color: #303133;
}
::v-deep .el-calendar-table .is-selected {
color: #fff;
background-color: #ff5e79 !important;
}
::v-deep .el-calendar__header {
display: flex;
justify-content: space-between;
padding: 0px 20px;
border: none;
}