vue elementui 组合式 api 对于容器的滑动条的位置的获取与设置。切换页面可以保持原来的容器里的滑动条位置不变

news/2024/11/17 7:22:38/

需要使用 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: anyonActivated(() => {if (container_elm) {container_elm.scrollTop = scroll_top}
})onMounted(() => {container_elm = elm.value.$elif (container_elm) {container_elm.addEventListener('scroll', () => {console.log('scrollTop: ' + container_elm.scrollTop)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>

http://www.ppmy.cn/news/1094330.html

相关文章

如何实现丝滑转码?

近年来&#xff0c;很多人想要从其他行业跳槽转入计算机领域。非计算机科班如何丝滑转码&#xff1f;来聊聊我的看法和观点。 非科班人士想要学习丝滑转码&#xff0c;可以按照以下步骤进行&#xff1a; 1. 学习基本的计算机知识&#xff1a;了解计算机的基本组成部分&#x…

树的基本定义

树的基本术语 一个节点包括一下内容 父节点的地址值值左节点的地址值右节点的地址值 如果没有父节点或者没有左右节点&#xff0c;那么这些节点对应的位置是 null 常见术语 节点—树中的元素常称为节点 边—根和它的子树根&#xff08;如果存在&#xff09;之间形成边的边可…

异步编程 - 07 基于JDK中的Future实现异步编程(下)_当Stream遇见CompletableFuture

文章目录 JDK8 StreamStream遇见CompletableFuture小结 JDK8 Stream JDK8中提供了流式对数据进行处理的功能&#xff0c;它的出现允许我们以声明式方式对数据集合进行处理。所谓声明式是相对于我们平时所用的命令式编程来说的&#xff0c;使用声明式编程会让我们对业务的表达更…

MySQL聚簇索引与非聚簇索引

分析&回答 当数据库一条记录里包含多个字段时&#xff0c;一棵B树就只能存储主键&#xff0c;如果检索的是非主键字段&#xff0c;则主键索引失去作用&#xff0c;变成顺序查找了。这时应该在第二个要检索的列上建立第二套索引。这个索引由独立的B树来组织。有两种常见的方…

rhcsa学习1基本命令(软硬链接,获取帮助等)

pwd 显示该shell的当前工作目录的完整路径名 ls 列出指定目录的目录内容 cd 更改shell的当前工作目录 没有什么特殊情况命令小写 ~所在位置&#xff1a;当前工作目录 #当前用户为管理员root $当前是普通用户 命令由三个基本部分组成&#xff1a; 命令、选项、参数 如下 -a --a…

Java LinkedList

简介 链表&#xff08;Linked list&#xff09;是一种常见的基础数据结构&#xff0c;是一种线性表&#xff0c;但是并不会按线性的顺序存储数据&#xff0c;而是在每一个节点里存到下一个节点的地址。 链表可分为单向链表和双向链表。 在Java程序设计语言中&#xff0c;所有…

Pytorch实现鸟类品种分类识别(含训练代码和鸟类数据集)

Pytorch实现鸟类品种分类识别(含训练代码和鸟类数据集) 目录 Pytorch实现鸟类品种分类识别(含训练代码和鸟类数据集) 1. 前言 2. 鸟类数据集 &#xff08;1&#xff09;Bird-Dataset26 &#xff08;2&#xff09;自定义数据集 3. 鸟类分类识别模型训练 &#xff08;1&a…

算法设计与分析 | 页码统计

题目&#xff1a; 一本书的页码从自然数1开始顺序编码直到自然数n。书的页码按照通常的习惯编排&#xff0c;每个页码都不含多余的前导数字0。例如第6页用6表示而不是06或006。数字统计问题要求对给定书的总页码&#xff0c;计算出书的全部页码中分别用到多少次数字0,1,2,3,...…