效果图如下:
<template>
<div class="dashboard-container">
<el-card style="width: 350px; height: auto; border-radius: 8px">
<div class="custom-style">
<p class="new-data">{{ newDate }}</p>
<el-calendar ref="calendar" v-model="value" />
</div>
</el-card>
</div>
</template>
<script>
export default {
name: 'Dashboard',
data() {
return {
value: new Date()
}
},
computed: {
newDate() {
return this.formatDate(this.value)
}
},
methods: {
formatDate(value) {
const date = new Date(value)
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
return `${year}年${month < 10 ? '0' + month : month}月${
day < 10 ? '0' + day : day
}日`
}
}
}
</script>
<style lang="scss">
// 自定义样式
.custom-style {
.new-data {
position: absolute;
margin: 0;
line-height: 26px;
}
.el-calendar__title {
opacity: 0;
}
// 上个月、下个月按钮样式
.el-button-group>.el-button:first-child:before {
content: "";
display: inline-block;
width: 6px !important;
height: 6px !important;
border: transparent;
border-top: 1px solid #6e6c6c;
border-right: 1px solid #6e6c6c;
transform: rotate(-135deg);
}
.el-button-group>.el-button:last-child:before {
content: "";
display: inline-block;
width: 6px !important;
height: 6px !important;
border: transparent;
border-top: 1px solid #6e6c6c;
border-right: 1px solid #6e6c6c;
transform: rotate(45deg);
}
.el-button-group>.el-button:not(:first-child):not(:last-child) {
color: #444444;
}
.el-button-group>.el-button:first-child span,
.el-button-group>.el-button:last-child span {
display: none;
}
.el-button-group>.el-button:not(:last-child) {
margin-right: -15px;
}
// 去除文字
.el-button-group>.el-button:not(:first-child):not(:last-child) {
span {
display: none;
}
}
.el-button-group>.el-button {
border: 0;
background: transparent;
}
.el-calendar-table__row td {
// 去掉边框
border: none !important;
// 缩小高度
.el-calendar-day {
height: 32px;
line-height: 18px;
// 设置居中
text-align: center;
}
}
// 自定义选中、悬浮颜色
.el-calendar-table .el-calendar-day:hover {
color: #fff;
background-color: #ff5e78 !important;
}
.el-calendar-table .is-today {
color: #303133;
}
.el-backtop,
.el-calendar-table td.is-today {
color: #ff5e78;
}
.el-calendar-table .is-selected {
color: #fff !important;
background-color: #ff5e78 !important;
}
.el-calendar__header {
display: flex;
justify-content: space-between;
padding: 0px 20px;
border: none;
}
}
</style>