vue3 + element-plus中el-drawer抽屉滚动条回到顶部
el-drawer抽屉滚动条回到顶部<script setup lang="ts" name="PerformanceLogQuery">
import { ref, nextTick } from "vue";
......
// 详情
import { performanceLogQueryByIdService } from "@/api/performanceLog";
const onDetailClick = async (id: number) => {
// 获取性能日志详情
let result = await performanceLogQueryByIdService(id);
detailData.value = result.data;
drawerVisible.value = true;
await nextTick().then(() => {
// 抽屉滚动条回到顶部
document.querySelector(".el-drawer__body")?.scrollTo(0, 0);
});
};
......
</script> 等价写法1：
<script setup lang="ts" name="PerformanceLogQuery">
import { ref, nextTick } from "vue";
......
// 详情
import { performanceLogQueryByIdService } from "@/api/performanceLog";
const onDetailClick = async (id: number) => {
// 获取性能日志详情
let result = await performanceLogQueryByIdService(id);
detailData.value = result.data;
drawerVisible.value = true;
await nextTick();
// 抽屉滚动条回到顶部
document.querySelector(".el-drawer__body")?.scrollTo(0, 0);
};
......
</script> 等价写法2：
<script setup lang="ts" name="PerformanceLogQuery">
import { ref, nextTick } from "vue";
......
// 详情
import { performanceLogQueryByIdService } from "@/api/performanceLog";
const onDetailClick = async (id: number) => {
// 获取性能日志详情
let result = await performanceLogQueryByIdService(id);
detailData.value = result.data;
drawerVisible.value = true;
nextTick(() => {
// 抽屉滚动条回到顶部
document.querySelector(".el-drawer__body")?.scrollTo(0, 0);
});
};
......
</script>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]