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

el-drawer抽屉滚动条回到顶部

1. <script setup lang="ts" name="PerformanceLogQuery">
2. import { ref, nextTick } from "vue";
3. ......
4. // 详情
5. import { performanceLogQueryByIdService } from "@/api/performanceLog";
6. const onDetailClick = async (id: number) => {
7.   // 获取性能日志详情
8.   let result = await performanceLogQueryByIdService(id);
9.   detailData.value = result.data;
10.   drawerVisible.value = true;
11.   await nextTick().then(() => {
12.     // 抽屉滚动条回到顶部
13.     document.querySelector(".el-drawer__body")?.scrollTo(0, 0);
14.   });
15. };
16. ......
17. </script>

复制代码

等价写法1：

1. <script setup lang="ts" name="PerformanceLogQuery">
2. import { ref, nextTick } from "vue";
3. ......
4. // 详情
5. import { performanceLogQueryByIdService } from "@/api/performanceLog";
6. const onDetailClick = async (id: number) => {
7.   // 获取性能日志详情
8.   let result = await performanceLogQueryByIdService(id);
9.   detailData.value = result.data;
10.   drawerVisible.value = true;
11.   await nextTick();
12.   // 抽屉滚动条回到顶部
13.   document.querySelector(".el-drawer__body")?.scrollTo(0, 0);
14. };
15. ......
16. </script>

复制代码

等价写法2： 

1. <script setup lang="ts" name="PerformanceLogQuery">
2. import { ref, nextTick } from "vue";
3. ......
4. // 详情
5. import { performanceLogQueryByIdService } from "@/api/performanceLog";
6. const onDetailClick = async (id: number) => {
7.   // 获取性能日志详情
8.   let result = await performanceLogQueryByIdService(id);
9.   detailData.value = result.data;
10.   drawerVisible.value = true;
11.   nextTick(() => {
12.     // 抽屉滚动条回到顶部
13.     document.querySelector(".el-drawer__body")?.scrollTo(0, 0);
14.   });
15. };
16. ......
17. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。