关于uniapp中的日历组件uni-calendar中的小红点

**uni-calendar 小红点详解**

在uni-app中，日历组件`uni-calendar`是一个非常实用的工具。其中，小红点是其一个重要的功能，它可以帮助用户快速定位到当前日期或选中的日期。在本文中，我们将深入探讨小红点的实现原理、使用方法以及一些常见问题。

**小红点的实现原理**

小红点的实现主要依赖于CSS和JavaScript两部分。首先，需要在uni-calendar组件中添加一个小红点的样式定义：

css/* uni-calendar.css */
.uni-calendar-dot {
 position: absolute;
 width:8px;
 height:8px;
 border-radius:50%;
 background-color: #ff0000;
}

javascript// uni-calendar.jsexport default {
 methods: {
 // 监听日历组件的点击事件 handleDateClick(date) {
 this.currentDate = date;
 this.$refs.calendarDot.updatePosition();
 },
 // 更新小红点的位置 updateCalendarDotPosition() {
 const currentDate = this.currentDate;
 const calendarDom = this.$refs.calendar;
 const dotDom = this.$refs.calendarDot;
 // 计算小红点的左上角坐标 const left = calendarDom.offsetLeft + (currentDate.getDate() -1) *35;
 const top = calendarDom.offsetTop + (this.currentMonth -1) *30;
 dotDom.style.left = `${left}px`;
 dotDom.style.top = `${top}px`;
 },
 // 初始化小红点的位置 initCalendarDotPosition() {
 this.updateCalendarDotPosition();
 }
 },
 mounted() {
 this.initCalendarDotPosition();
 }
}

html<template>
 <view>
 <uni-calendar ref="calendar" @click="handleDateClick"></uni-calendar>
 </view>
</template>

<script>
import uniCalendar from '@dcloudio/uni-calendar';
export default {
 components: { uniCalendar },
 methods: {
 handleDateClick(date) {
 console.log('点击了日期:', date);
 }
 }
}
</script>

css/* uni-calendar.css */
.uni-calendar-dot {
 position: absolute;
 width:8px;
 height:8px;
 border-radius:50%;
 background-color: #ff0000;
}

javascript// uni-calendar.jsexport default {
 methods: {
 // 监听日历组件的点击事件 handleDateClick(date) {
 this.currentDate = date;
 this.$refs.calendarDot.updatePosition();
 },
 // 更新小红点的位置 updateCalendarDotPosition() {
 const currentDate = this.currentDate;
 const calendarDom = this.$refs.calendar;
 const dotDom = this.$refs.calendarDot;
 // 计算小红点的左上角坐标 const left = calendarDom.offsetLeft + (currentDate.getDate() -1) *35;
 const top = calendarDom.offsetTop + (this.currentMonth -1) *30;
 dotDom.style.left = `${left}px`;
 dotDom.style.top = `${top}px`;
 },
 // 初始化小红点的位置 initCalendarDotPosition() {
 this.updateCalendarDotPosition();
 }
 },
 mounted() {
 this.initCalendarDotPosition();
 }
}