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>