需要使用 addEventListener 的方法获取滑动条的位置
xxx.vue 页面是一直缓存的,所以使用路由进入钩子(onActivated)设置滑动条的位置
App.vue:
...
<el-container>
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
...
xxx.vue
<script setup lang="ts">
import { ref, onMounted, onUnmounted, onActivated } from 'vue'
const elm = ref(null)
let container_elm: any
let scroll_top: any
onActivated(() => {
if (container_elm) {
container_elm.scrollTop = scroll_top
}
})
onMounted(() => {
if (elm.value) {
container_elm = ((elm.value) as any).$el
}
if (container_elm) {
container_elm.addEventListener('scroll', () => {
scroll_top = container_elm.scrollTop
});
}
}
</script>
<template>
<el-container>
<el-aside width="200px">
table
</el-aside>
<el-main ref="elm">
<div id="main" style="width:600px; height:400px;"></div>
<div id="main2" style="width:600px; height:400px;"></div>
</el-main>
</el-container>
</template>