1.日历组件封装
目标:了解[日历组件](https://element.eleme.cn/#/zh-CN/component/calendar)基本用法
<template>
<el-calendar v-model="currentDate"></el-calendar>
</template>
<script>
export default {
data() {
return {
currentDate: new Date()
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-calendar-day {
height: 50px;
}
.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%;
}
</style>
2 日历内容自定义
<template>
<el-calendar v-model="currentDate">
<template #dateCell>
<div class="date-content">
<span class="text">01</span>
<span class="rest">休</span>
</div>
</template>
</el-calendar>
</template>
<script>
export default {
data() {
return {
curDate: new Date()
}
}
}
</script>
3 日历作用域插槽
使用作用域插槽给到我们的真实数据进行自定义渲染
<template>
<el-calendar v-model="currentDate">
<template #dateCell="{ date, data }">
<div class="date-content">
<span class="text">{{ getDay(data.day) }}</span>
<span v-if="isWeek(date)" class="rest">休</span>
</div>
</template>
</el-calendar>
</template>
<script>
export default {
methods: {
// 天
getDay(value) {
const day = value.split('-')[2] // 11, 02
return day
},
// 是否周末
isWeek(date) {
return date.getDay() === 6 || date.getDay() === 0
}
}
}
</script>