目录
一、原始样式
API
二、利用浏览器看源码
打开开发者工具
三、具体代码
<template>
<div class="calendar-container">
<p class="date">{{ newDate }}</p>
<el-calendar ref="calendar" v-model="value" />
</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
return `${month }月`
}
}
}
</script>
<style lang="scss">
// 自定义样式
.calendar-container{
.date {
position: absolute;
line-height: 26px;
margin-top:14px;
margin-left:32px;
font-size: 20px;
}
.el-calendar__title {
display:none;
}
.el-button-group {
margin-top:14px;
margin-left:260px;
}
// 上个月、下个月按钮样式
.el-button-group>.el-button:first-child:before {
content: "";
display: inline-block;
width: 10px !important;
height: 10px !important;
border: transparent;
border-top: 2px solid gray;
border-right: 2px solid #6e6c6c;
transform: rotate(-135deg);
margin-right: 2px;
/* 可根据需要调整间距 */
}
.el-button-group>.el-button:last-child:before {
content: "";
display: inline-block;
width: 10px !important;
height: 10px !important;
border: transparent;
border-top: 2px solid gray;
border-right: 2px solid gray;
transform: rotate(45deg);
}
//去除按钮上的文字
.el-button-group>.el-button:first-child span,
.el-button-group>.el-button:last-child span {
display: none;
}
.el-button-group>.el-button:first-child {
margin-right: -15px;
margin-left:10px;
}
// 去除中间按钮
.el-button-group>.el-button:not(:first-child):not(:last-child) {
display: none;
}
// 去除按钮边框
.el-button-group>.el-button {
border: none;
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: rgb(57, 89, 230) !important;
}
.el-calendar-table .is-selected {
color: #fff !important;
background-color: rgb(57, 89, 230) !important;
}
.el-calendar__header {
display: flex;
justify-content: space-between;
padding: 0px 20px;
border: none;
}
}
</style>