使用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>
