当前位置：首页 > news >正文

vue3 + element-plus中el-drawer抽屉滚动条回到顶部

news 来源：原创 2025/4/23 14:28:24

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>