使用element日历插件,标注今日日期和周六日
实现这种效果的代码如下:
<template>
<el-calendar v-model="value">
<template slot="dateCell" slot-scope="{ date, data }">
<div class="date-content">
<span class="text">{{ getDay(date) }}</span>
<span v-if="isWeek(date)" class="rest">休</span>
</div>
</template>
</el-calendar></template>
</el-calendar>
</template>
//日期插件官方文档说明:
//设置 value 来指定当前显示的月份。如果 value 未指定,则显示当月。value 支持 v-model 双向绑定。
//通过设置名为 dateCell 的 scoped-slot 来自定义日历单元格中显示的内容。在scoped-slot 可以获取到 date(当前单元格的日期), data(包括 type,isSelected,day 属性)。
//更多详情解释参考element官方的 API 文档。
<script>
export default {
data() {
return {
value: new Date()
}
},
methods: {
// 标注今天日期
getDay(date) {
return date.getDate()
},
// 判断是否周六日
isWeek(date) {
// 1. if else普通写法
// if (date.getDay() === 6 || date.getDay() === 0) {
// return true
// } else {
// return false
// }
// 2.优化:三元表达式写法
return date.getDay() === 6 || date.getDay() === 0
}
}
}
</script>
<style lang="scss" scoped>
.select-box {
display: flex;
justify-content: flex-end;
}
::v-deep .el-calendar-day {
height: auto;
}
::v-deep .el-calendar-table__row td::v-deep .el-calendar-table tr td:first-child, ::v-deep .el-calendar-table__row td.prev{
border:none;
}
.date-content {
height: 40px;
text-align: center;
line-height: 40px;
font-size: 14px;
}
.date-content .rest {
color: #fff;
border-radius: 50%;
background: rgb(250, 124, 77);
width: 20px;
height: 20px;
line-height: 20px;
display: inline-block;
font-size: 12px;
margin-left: 10px;
}
.date-content .text{
width: 20px;
height: 20px;
line-height: 20px;
display: inline-block;
}
::v-deep .el-calendar-table td.is-selected .text{
background: #409eff;
color: #fff;
border-radius: 50%;
}
::v-deep .el-calendar__header {
display: none
}
</style>