src/components/common/Calendar.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+const currentDate = new Date();
-import {ArrowLeft,ArrowRight} from '@element-plus/icons-vue'
+const currentMonth = currentDate.getMonth();
-const currentMonth = ref(new Date().getMonth());
+const currentYear = currentDate.getFullYear();
-const currentYear = ref(new Date().getFullYear());
-const selectedDate = ref<{ day: number; isCurrentMonth: boolean } | null>(null);
 
 // 获取指定月份信息的基础函数
 const getFirstDayOfMonth = (year: number, month: number): number => {
@@ -23,11 +21,8 @@ const generateCalendarData = (
   const daysInMonth = getDaysInMonth(year, month);
   const firstDayIndex = getFirstDayOfMonth(year, month);
 
-  // 动态获取当前日期
+  // 获取当前日期的日部分
-  const currentDate = new Date();
   const currentDay = currentDate.getDate();
-  const currentMonthValue = currentDate.getMonth();
-  const currentYearValue = currentDate.getFullYear();
 
   // 计算前后月信息
   const prevMonth = month === 0 ? 11 : month - 1;
@@ -50,18 +45,18 @@ const generateCalendarData = (
 
       // 当前月日期
       if ((isFirstWeek && day >= firstDayIndex) || (!isFirstWeek && dayCounter <= daysInMonth)) {
-        const isToday = dayCounter === currentDay && month === currentMonthValue && year === currentYearValue;
+        const isToday = dayCounter === currentDay && month === currentMonth && year === currentYear;
-        weekDays.push({ day: dayCounter, isCurrentMonth: true, isCurrentDay: isToday });
+        weekDays.push({day: dayCounter, isCurrentMonth: true, isCurrentDay: isToday});
         dayCounter++;
       }
       // 前月日期
       else if (isFirstWeek) {
         const prevDay = daysInPrevMonth - firstDayIndex + day + 1;
-        weekDays.push({ day: prevDay, isCurrentMonth: false, isCurrentDay: false });
+        weekDays.push({day: prevDay, isCurrentMonth: false, isCurrentDay: false});
       }
       // 下月日期
       else {
-        weekDays.push({ day: nextMonthDayCounter, isCurrentMonth: false, isCurrentDay: false });
+        weekDays.push({day: nextMonthDayCounter, isCurrentMonth: false, isCurrentDay: false});
         nextMonthDayCounter++;
       }
     }
@@ -73,42 +68,13 @@ const generateCalendarData = (
 };
 
 // 使用示例
-const calendarData = computed(() => generateCalendarData(currentYear.value, currentMonth.value));
+const calendarData = generateCalendarData(currentYear, currentMonth);
 
-// 切换月份
-const prevMonth = () => {
-  if (currentMonth.value === 0) {
-    currentMonth.value = 11;
-    currentYear.value -= 1;
-  } else {
-    currentMonth.value -= 1;
-  }
-  selectedDate.value = null;
-};
-
-const nextMonth = () => {
-  if (currentMonth.value === 11) {
-    currentMonth.value = 0;
-    currentYear.value += 1;
-  } else {
-    currentMonth.value += 1;
-  }
-  selectedDate.value = null;
-};
-const emit=defineEmits(['dateClick']);
-const handleDateClick = (day: number) => {
-    selectedDate.value = { day, isCurrentMonth:true };
-   emit('dateClick',`${currentYear.value}-${currentMonth.value + 1}-${day}` )
-};
 </script>
 
 <template>
   <div class="calendar-wrapper">
-    <div class="header">
+    <span class="current">{{ currentYear }}年{{ currentMonth + 1 }}月</span>
-      <span class="btn" @click="prevMonth"><el-icon><ArrowLeft /></el-icon></span>
-      <span class="current">{{ currentYear }}年{{ currentMonth + 1 }}月</span>
-      <span class="btn" @click="nextMonth"><el-icon><ArrowRight /></el-icon></span>
-    </div>
     <div class="row">
       <div class="item">
         <span class="tip">日</span>
@@ -133,48 +99,18 @@ const handleDateClick = (day: number) => {
       </div>
     </div>
     <div v-for="item in calendarData" class="row">
-      <div class="item" v-for="subItem in item" @click="handleDateClick(subItem.day)">
+      <div class="item" v-for="subItem in item">
-        <span :class="[
+          <span :class="subItem.isCurrentDay ? 'currentDay' : subItem.isCurrentMonth ? '' : 'otherMonth'">
-          subItem.isCurrentDay ? 'currentDay' : '',
+        {{ subItem.isCurrentDay ? "今" : subItem.day }}
-          subItem.isCurrentMonth ? '' : 'otherMonth',
+      </span>
-          selectedDate && selectedDate.day === subItem.day && selectedDate.isCurrentMonth === subItem.isCurrentMonth ? 'selectedDay' : ''
-        ]">
-          {{ subItem.isCurrentDay ? "今" : subItem.day }}
-        </span>
       </div>
     </div>
   </div>
+
 </template>
 
 <style scoped lang="scss">
 .calendar-wrapper {
-  .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 8px;
-    .current{
-      font-weight: 500;
-      font-size: 18px;
-      color: #333333;
-      font-style: normal;
-      margin-bottom: 8px;
-    }
-
-    .btn {
-      padding: 5px 10px;
-      font-size: 14px;
-      color: #1677FE;
-      background-color: #FFF;
-      border-radius: 4px;
-      cursor: pointer;
-
-      &:hover {
-        background-color: #1677FE;
-        color: #FFF;
-      }
-    }
-  }
   width: 100%;
   height: 100%;
   box-sizing: border-box;
@@ -183,7 +119,13 @@ const handleDateClick = (day: number) => {
   border-radius: 0 0 8px 8px;
   display: flex;
   flex-direction: column;
-
+  .current{
+    font-weight: 500;
+    font-size: 18px;
+    color: #333333;
+    font-style: normal;
+    margin-bottom: 8px;
+  }
   .row {
     flex: 1;
     width: 100%;
@@ -222,11 +164,7 @@ const handleDateClick = (day: number) => {
       .otherMonth{
         color: #999;
       }
-      .selectedDay {
-        background: #FFA500;
-        color: #fff;
-      }
     }
   }
 }
-</style>
+</style>

src/views/registration/index.vue

@@ -4,7 +4,7 @@
       <div class="left">
         <div class="left-top">
           <Panel title="日历">
-            <Calendar @date-click="selectDate"></Calendar>
+            <Calendar></Calendar>
           </Panel>
         </div>
         <div class="left-bottom">
@@ -87,9 +87,7 @@ import Calendar from "@/components/common/Calendar.vue";
 import Panel from "@/components/common/Panel.vue";
 import {apiConfig} from "@/assets/config/apiConfig.ts";
 import {Search} from "@element-plus/icons-vue";
-const selectDate = (date: any)=>{
+
-  console.log(date)
-}
 const isShowNum = ref(-1)
 const roleList = ref<any>([])