为了确保每次打开弹窗时滚动条都回到顶部，你可以在关闭弹窗的函数 closeModal 中添加一些逻辑来重置滚动位置。以下是如何修改代码的示例：
- 在
closeModal函数中，使用 JavaScript 的 DOM 操作将滚动位置设置为顶部。 - 确保在弹窗打开时，记录上一次的状态，以便再次打开时能保持当前状态。
下面是可能的实现方式：
<template>
<a-modal
v-model:open="isModalVisible"
:title="modalType === 'add' ? '新增入账申请' : modalType === 'detail' ? '查看入账申请' : '更新入账申请'"
width="1500px"
:bodyStyle="{ padding: '16px', maxHeight: 'calc(95vh - 200px)', overflowY: 'scroll' }"
>
<template #footer>
<a-button @click="closeModal">取消</a-button>
<a-button class="button-light-blue" type="primary" @click="handleSave" v-if="modalType !== 'detail'">保存</a-button>
<a-button class="button-light-blue" type="primary" @click="handleSubmit" v-if="modalType !== 'detail'">提交</a-button>
</template>
<!-- Modal Content Here -->
</a-modal>
</template>
<script setup>
import { ref, nextTick } from 'vue';
const isModalVisible = ref(false);
const modalType = ref('add'); // or other types
const closeModal = () => {
isModalVisible.value = false;
};
// 如果你希望在打开模态框后回到顶部，可以创建一个方法
const openModal = () => {
isModalVisible.value = true;
nextTick(() => {
const modalBody = document.querySelector('.ant-modal-body');
if (modalBody) {
modalBody.scrollTop = 0; // 将滚动位置设置为顶部
}
});
};
const handleSave = () => {
// 保存逻辑
};
const handleSubmit = () => {
// 提交逻辑
};
</script>
注意事项：
- 使用
nextTick：当你在 Vue 中操作 DOM 时，由于 Vue 是异步渲染的，最好使用nextTick来确保 DOM 已经更新。 - 类选择器：根据你的 UI 库，可能需要调整
.ant-modal-body的选择器以匹配实际情况（这是 Ant Design Vue 的默认样式）。 - 行为一致性：在用户体验上，每次关闭并重新打开模态框的时候，都保持相同的行为（即自动回到顶部），这样用户体验会更好。
内容由零声教学AI助手提供，问题来源于学员提问
