feat(任务筛选): 添加弹窗显示状态监听并控制返回顶部按钮
添加对任务筛选组件弹窗显示状态的监听,当弹窗显示时隐藏返回顶部按钮,提升用户体验
Showing
2 changed files
with
15 additions
and
3 deletions
| ... | @@ -55,11 +55,16 @@ const props = defineProps({ | ... | @@ -55,11 +55,16 @@ const props = defineProps({ |
| 55 | } | 55 | } |
| 56 | }) | 56 | }) |
| 57 | 57 | ||
| 58 | -const emit = defineEmits(['change']) | 58 | +const emit = defineEmits(['change', 'popup-visible-change']) |
| 59 | 59 | ||
| 60 | // 状态 | 60 | // 状态 |
| 61 | const showTaskPicker = ref(false) | 61 | const showTaskPicker = ref(false) |
| 62 | const showSubtaskPicker = ref(false) | 62 | const showSubtaskPicker = ref(false) |
| 63 | + | ||
| 64 | +// 监听弹窗显示状态 | ||
| 65 | +watch([showTaskPicker, showSubtaskPicker], ([showTask, showSubtask]) => { | ||
| 66 | + emit('popup-visible-change', showTask || showSubtask) | ||
| 67 | +}) | ||
| 63 | const taskList = ref([]) | 68 | const taskList = ref([]) |
| 64 | const subtaskList = ref([]) | 69 | const subtaskList = ref([]) |
| 65 | const selectedTaskId = ref('') | 70 | const selectedTaskId = ref('') | ... | ... |
| ... | @@ -2,7 +2,7 @@ | ... | @@ -2,7 +2,7 @@ |
| 2 | * @Author: hookehuyr hookehuyr@gmail.com | 2 | * @Author: hookehuyr hookehuyr@gmail.com |
| 3 | * @Date: 2025-06-19 17:12:19 | 3 | * @Date: 2025-06-19 17:12:19 |
| 4 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 4 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 5 | - * @LastEditTime: 2025-12-15 13:08:35 | 5 | + * @LastEditTime: 2025-12-15 13:45:56 |
| 6 | * @FilePath: /mlaj/src/views/teacher/studentPage.vue | 6 | * @FilePath: /mlaj/src/views/teacher/studentPage.vue |
| 7 | * @Description: 学生详情页面 | 7 | * @Description: 学生详情页面 |
| 8 | --> | 8 | --> |
| ... | @@ -100,6 +100,7 @@ | ... | @@ -100,6 +100,7 @@ |
| 100 | :key="currentGroupId" | 100 | :key="currentGroupId" |
| 101 | :group-id="currentGroupId" | 101 | :group-id="currentGroupId" |
| 102 | @change="handleTaskFilterChange" | 102 | @change="handleTaskFilterChange" |
| 103 | + @popup-visible-change="handlePopupVisibleChange" | ||
| 103 | /> | 104 | /> |
| 104 | </div> | 105 | </div> |
| 105 | <van-tabs v-model:active="activeTab" color="#4caf50" animated swipeable @change="handleTabChange"> | 106 | <van-tabs v-model:active="activeTab" color="#4caf50" animated swipeable @change="handleTabChange"> |
| ... | @@ -321,7 +322,7 @@ | ... | @@ -321,7 +322,7 @@ |
| 321 | </div> | 322 | </div> |
| 322 | </van-dialog> | 323 | </van-dialog> |
| 323 | 324 | ||
| 324 | - <van-back-top right="5vw" bottom="25vh" offset="600" /> | 325 | + <van-back-top v-if="showBackTop" right="5vw" bottom="25vh" offset="600" /> |
| 325 | </div> | 326 | </div> |
| 326 | </van-config-provider> | 327 | </van-config-provider> |
| 327 | </template> | 328 | </template> |
| ... | @@ -392,6 +393,12 @@ const handleTaskFilterChange = ({ task_id, subtask_id }) => { | ... | @@ -392,6 +393,12 @@ const handleTaskFilterChange = ({ task_id, subtask_id }) => { |
| 392 | getStatList() | 393 | getStatList() |
| 393 | } | 394 | } |
| 394 | 395 | ||
| 396 | +// 返回顶部按钮显示控制 | ||
| 397 | +const showBackTop = ref(true) | ||
| 398 | +const handlePopupVisibleChange = (isVisible) => { | ||
| 399 | + showBackTop.value = !isVisible | ||
| 400 | +} | ||
| 401 | + | ||
| 395 | // 当前选中的标签页 | 402 | // 当前选中的标签页 |
| 396 | const activeTab = ref('homework') | 403 | const activeTab = ref('homework') |
| 397 | 404 | ... | ... |
-
Please register or login to post a comment