日历内其他月份日期不渲染更改弹窗.

src/views/system/calendar/index.vue

@@ -36,13 +36,22 @@
           </template>
 
           <template #date-cell="{ data }">
-            <el-popover :visible="holidayDate[data.day]?.visible"  placement="right" :width="240" trigger="click">
+            <el-popover
+              v-if="isCurrentMonth(data,index)"
+              :visible="holidayDate[data.day]?.visible"
+              placement="right"
+              :width="240"
+              trigger="click"
+            >
               <template #reference>
                 <div @click="handleSelect(data)" :class="{ 'holidayWork': holidayDate[data.day]?.isWorkday }">
-                  <span style="font-size: 14px">
+                  <span style="font-size: 12px">
                     {{ formatDate2(data.date) === current? data.date.getDate()+'(今天)':data.date.getDate() }}
                   </span>
-                  <span v-if="holidayDate[data.day]?.content !== ''&&holidayDate[data.day]?.content !== null&&holidayDate[data.day]?.content !== undefined" style="font-size: 12px">
+                  <span
+                    v-if="holidayDate[data.day]?.content !== ''&&holidayDate[data.day]?.content !== null&&holidayDate[data.day]?.content !== undefined"
+                    style="font-size: 12px"
+                  >
                     {{'('+getIntDictOptions(DICT_TYPE.CALENDAR_CONTENT)[holidayDate[data.day]?.content].label+')'}}
                   </span>
                 </div>
@@ -50,7 +59,7 @@
               <!-- 右上角关闭按钮 -->
               <el-button
                 type="primary"
-                style="position: absolute; top: 5px; right: 5px; padding: 0;width: 12px;height: 12px;"
+                class="close-But"
                 @click="closePopover(data)"
               >
                 <el-icon style="margin-right: 3px;margin-left: 3px;" class="el-icon--right"><Close /></el-icon>
@@ -144,6 +153,11 @@ const formDataCaln = ref({
 //   const data = await CalendarApi.createCalendar(dda)
 //   console.log(data)
 // }
+//判断是否渲染当前日期更改组件
+const isCurrentMonth = (date:any,index:number) => {
+  const SelectDate = date.date;
+  return SelectDate.getMonth() === index;
+};
 
 /** 查询列表 */
 const getListDate = async () => {
@@ -272,7 +286,14 @@ onMounted( async ()=> {
 </script>
 <!-- 样式很重要 -->
 <style lang="scss">
-
+.close-But {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  padding: 0;
+  width: 12px;
+  height: 12px;
+}
 .custom-calendar {
   border: 1px solid #1f1f1f !important; /* 使用 !important 确保样式生效 */
   border-radius: 10px; /* 可选：添加圆角 */