feat(日历组件): 添加面板切换事件处理
在CollapsibleCalendar和IndexCheckInPage组件中添加panel-change事件处理 当日历面板切换时触发月份数据获取
Showing
2 changed files
with
21 additions
and
2 deletions
| ... | @@ -56,6 +56,7 @@ | ... | @@ -56,6 +56,7 @@ |
| 56 | :show-mark="false" | 56 | :show-mark="false" |
| 57 | @select="onSelectDay" | 57 | @select="onSelectDay" |
| 58 | @click-subtitle="onClickSubtitle" | 58 | @click-subtitle="onClickSubtitle" |
| 59 | + @panel-change="onPanelChange" | ||
| 59 | > | 60 | > |
| 60 | </van-calendar> | 61 | </van-calendar> |
| 61 | </div> | 62 | </div> |
| ... | @@ -139,6 +140,14 @@ const onClickSubtitle = (evt) => { | ... | @@ -139,6 +140,14 @@ const onClickSubtitle = (evt) => { |
| 139 | emit('click-subtitle', evt) | 140 | emit('click-subtitle', evt) |
| 140 | } | 141 | } |
| 141 | 142 | ||
| 143 | +/** | ||
| 144 | + * 面板切换处理 | ||
| 145 | + * @param {Object} panel - 切换后的面板信息 | ||
| 146 | + */ | ||
| 147 | +const onPanelChange = (panel) => { | ||
| 148 | + emit('panel-change', panel) | ||
| 149 | +} | ||
| 150 | + | ||
| 142 | // 监听modelValue变化 | 151 | // 监听modelValue变化 |
| 143 | watch(() => props.modelValue, (newValue) => { | 152 | watch(() => props.modelValue, (newValue) => { |
| 144 | if (newValue) { | 153 | if (newValue) { | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-05-29 15:34:17 | 2 | * @Date: 2025-05-29 15:34:17 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-11-13 17:22:35 | 4 | + * @LastEditTime: 2025-11-13 18:32:20 |
| 5 | * @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue | 5 | * @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | --> | 7 | --> |
| ... | @@ -17,6 +17,7 @@ | ... | @@ -17,6 +17,7 @@ |
| 17 | v-model="selectedDate" | 17 | v-model="selectedDate" |
| 18 | @select="onSelectDay" | 18 | @select="onSelectDay" |
| 19 | @click-subtitle="onClickSubtitle" | 19 | @click-subtitle="onClickSubtitle" |
| 20 | + @panel-change="onPanelChange" | ||
| 20 | /> | 21 | /> |
| 21 | </div> | 22 | </div> |
| 22 | 23 | ||
| ... | @@ -519,7 +520,16 @@ const onSelectDay = (day) => { | ... | @@ -519,7 +520,16 @@ const onSelectDay = (day) => { |
| 519 | } | 520 | } |
| 520 | 521 | ||
| 521 | const onClickSubtitle = (evt) => { | 522 | const onClickSubtitle = (evt) => { |
| 522 | - console.warn('点击了日期标题'); | 523 | + // console.warn('点击了日期标题', evt); |
| 524 | +} | ||
| 525 | + | ||
| 526 | +/** | ||
| 527 | + * 面板切换处理 | ||
| 528 | + * @param {Object} panel - 切换后的面板信息 | ||
| 529 | + */ | ||
| 530 | +const onPanelChange = ({ date }) => { | ||
| 531 | + // console.warn('面板切换', date); | ||
| 532 | + getTaskDetail(dayjs(date).format('YYYY-MM')); | ||
| 523 | } | 533 | } |
| 524 | 534 | ||
| 525 | /** | 535 | /** | ... | ... |
-
Please register or login to post a comment