解决el-tooltip滚动时悬浮框相对位置发生变化

获取最外层box的class,并在内层添加el-scrollbar

<template><div class="ChartsBottom"><el-scrollbar><ul class=""><li v-for="(item, index) in list" :key="index"><div class="content"><el-tooltip :content="item.name" placement="top" effect="light" :offset="4"><span class="text-exceeding">{{ item.name }}</span></el-tooltip><span><i><b class="numtxt text-exceeding">{{ item.value }}{{ item.unit }}</b></i></span></div></li></ul></el-scrollbar></div>
</template>
<script>
import useScrollCloseToolTip from '@/utils/useScrollCloseToolTip'
export default {name: 'ChartsBottom',props: {list: {type: Array,default: () => []}},setup(props) {useScrollCloseToolTip('ChartsBottom')}
}
</script>
<style lang="scss" scoped>
.ChartsBottom {height: 100%;width: 100%;overflow-y: auto;font-size: 1.4rem;position: relative;padding-top: 0;z-index: 1;ul {margin-top: 1rem;text-align: left;}li {display: inline-block;color: #00a9ff;margin-bottom: 2rem;width: 20%;span {max-width: 85%;display: inline-block;&:nth-child(2) {display: block;color: #fff;margin-top: 1rem;}}i {font-style: normal;}}
}
.numtxt {display: block;
}
</style>

useScrollCloseToolTip.js

import { onMounted } from 'vue'export default function useScrollCloseToolTip(listenDomClass) {onMounted(() => {let dom = document.getElementsByClassName(listenDomClass)for (let j = 0; j < dom.length; j++) {let scrollDom = dom[j].getElementsByClassName('el-scrollbar__wrap')for (let i = 0; i < scrollDom.length; i++) {scrollDom[i].onscroll = () => {let list = document.getElementsByClassName('el-popper')if (list.length > 0) {list[list.length - 1].style.display = 'none'}}}}})
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/118188.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

YOLO目标检测——行人数据集【含对应voc、coco和yolo三种格式标签+划分脚本】

实际项目应用&#xff1a;智能监控、人机交互、行为分析、安全防护数据集说明&#xff1a;行人检测数据集&#xff0c;真实场景的高质量图片数据&#xff0c;数据场景丰富标签说明&#xff1a;使用lableimg标注软件标注&#xff0c;标注框质量高&#xff0c;含voc(xml)、coco(j…

docker-compose安装ES7.14和Kibana7.14(有账号密码)

一、docker-compose安装ES7.14.0和kibana7.14.0 1、下载镜像 1.1、ES镜像 docker pull elasticsearch:7.14.0 1.2、kibana镜像 docker pull kibana:7.14.0 2、docker-compose安装ES和kibana 2.1、创建配置文件目录和文件 #创建目录 mkdir -p /home/es-kibana/config mkdir…

音视频技术开发周刊 | 316

每周一期&#xff0c;纵览音视频技术领域的干货。 新闻投稿&#xff1a;contributelivevideostack.com。 日程揭晓&#xff01;速览深圳站大会专题议程详解 LiveVideoStackCon 2023 音视频技术大会深圳站&#xff0c;保持着往届强大的讲师阵容以及高水准的演讲质量。两天的参会…

【解锁未来】探索Web3的无限可能性-01

文章目录 前言什么是Web3&#xff1f; 前言 还记得你第一次听说比特币吗&#xff1f;也许那只是一个关于新技术将改变一切的微弱嗡嗡声。也许你会有一种 "FOMO "的感觉&#xff0c;因为那些早早入场的人突然积累了一大笔财富–尽管你并不清楚这些 "钱 "可…

flutter开发的一个小小小问题,内网依赖下不来

问题 由于众所周知的原因&#xff0c;flutter编译时&#xff0c;经常出现Could not get resource https://storage.googleapis.com/download.flutter.io…的问题&#xff0c;如下&#xff1a; * What went wrong: Could not determine the dependencies of task :app:lintVit…

ip报头和ip报文切片组装问题

在tcp层将数据打包封装向下传递后&#xff0c;网络层将其整个看为一个数据&#xff0c;然后对其数据加网络报头操作&#xff0c;在网络层最具有代表的协议就是ip协议。在这里我们探究ipv4的报头。 ip报头 4位版本&#xff1a;指定ip的版本号&#xff0c;对于ipv4来说就是4。 …

利用jupyter进行分类

Jupyter Notebook是一个非常强大的工具&#xff0c;可以用于各种数据分析和机器学习任务&#xff0c;包括分类问题。在Jupyter Notebook中进行分类通常需要以下步骤&#xff1a; 导入所需的库&#xff1a;首先&#xff0c;你需要导入必要的Python库&#xff0c;例如NumPy、Pand…

java 读取pdf文件内容

一、引入maven <dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox</artifactId><version>2.0.25</version> </dependency>二、代码工具类 package com.jiayou.peis.utils;//import com.itextpdf.text.pd…

软考 系统架构设计师系列知识点之设计模式(1)

所属章节&#xff1a; 老版&#xff08;第一版&#xff09;教材 第7章. 设计模式 第1节. 设计模式概述 7.1.4 设计模式的分类 设计模式的分类 软件模式主要可分为设计模式、分析模式、组织和过程模式等&#xff0c;每一类又可细分为若干个子类。在此着重介绍设计模式&#x…

asp.net文档管理系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio

一、源码特点 asp.net文档管理系统是一套完善的web设计管理系统&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为vs2010&#xff0c;数据库为sqlserver2008&#xff0c;使用c#语言开发 asp.net文档管理系统 二、功能介绍 (1…

C++ list 的使用

目录 1. 构造函数 1.1 list () 1.2 list (size_t n, const T& val T()) 1.3 list (InputIterator first, InputIterator last) 2. bool empty() const 3. size_type size() const 4. T& front() 4. T& back() 5. void push_front (const T& val) 6.…

FL Studio 21 for Mac中文破解版百度网盘免费下载安装激活

FL Studio 21 for Mac中文破解版是Mac系统中的一款水果音乐编辑软件&#xff0c;提供多种插件&#xff0c;包括采样器、合成器和效果器&#xff0c;可编辑不同风格的音乐作品&#xff0c;Pattern/Song双模式&#xff0c;可兼容第三方插件和音效包&#xff0c;为您的创意插上翅膀…

java _JDBC 开发

目录 一.封装JDBCUtiles 二.事务 三.批处理 四.数据库连接池 C3P0 Druidf(德鲁伊&#xff09;阿里 五.Apache-DBUtiles 六.Apache-DBUtils 七.DAO 和增删改查 通用方法 - BasicDao 一.封装JDBCUtiles 说明&#xff1a;在jdbc操作中&#xff0c;获取连接和释放资源&#…

mysql 切割字符串函数

93、mysql 切割字符串函数 需求&#xff0c;使用in 匹配多个参数&#xff0c;name字段值类型&#xff1a;1234(小明) 结果&#xff1a; select * from user where SUBSTRING_INDEX(REPLACE(name, ), ), (, -1) in ( 小明,小李)使用的函数如下 1、使用SUBSTRING_INDEX函数 SU…

k8s-----7、Pod健康检查

健康检查 1、健康检查 1、健康检查 健康检查可以分为两种 1、livenessProbe (存活检查)。如果检查失败&#xff0c;将杀死容器&#xff0c;通过Pod的restartPolicy来操作。 2、readinessProbe(就绪检查)。如果检查失败&#xff0c;k8s会将Pod从Service endpoints中剔除。 Pr…

设计模式:代理模式(C#、JAVA、JavaScript、C++、Python、Go、PHP)

上一篇《组合模式》 下一篇《命令模式》 简介&#xff1a; 代理模式&#xff0c;它是一种结构型设计模式&#xff0c;它通过引入一个代理对象来控制对原始对象的访问。代理模式的主要目的是在保持原始对象…

《动手学深度学习 Pytorch版》 10.4 Bahdanau注意力

10.4.1 模型 Bahdanau 等人提出了一个没有严格单向对齐限制的可微注意力模型。在预测词元时&#xff0c;如果不是所有输入词元都相关&#xff0c;模型将仅对齐&#xff08;或参与&#xff09;输入序列中与当前预测相关的部分。这是通过将上下文变量视为注意力集中的输出来实现…

【Elasticsearch】es脚本编程使用详解

目录 一、es脚本语言介绍 1.1 什么是es脚本 1.2 es脚本支持的语言 1.3 es脚本语言特点 1.4 es脚本使用场景 二、环境准备 2.1 docker搭建es过程 2.1.1 拉取es镜像 2.1.2 启动容器 2.1.3 配置es参数 2.1.4 重启es容器并访问 2.2 docker搭建kibana过程 2.2.1 拉取ki…

代码训练营第50天:leetcode198打家劫舍|leetcode213打家劫舍2|leetcode337打家劫舍3

leetcode198&#xff1a;打家劫舍 文章讲解&#xff1a;leetcode198 leetcode213&#xff1a;打家劫舍2 文章讲解&#xff1a;leetcode213 leetcode337&#xff1a;打家劫舍3 文章讲解&#xff1a;leetcode337 目录 1&#xff0c;leetcode198 打家劫舍 2&#xff0c;leetcode…

LSKA(大可分离核注意力):重新思考CNN大核注意力设计

文章目录 摘要1、简介2、相关工作3、方法4、实验5、消融研究6、与最先进方法的比较7、ViTs和CNNs的鲁棒性评估基准比较8、结论 摘要 https://arxiv.org/pdf/2309.01439.pdf 大型可分离核注意力&#xff08;LSKA&#xff09;模块的视觉注意力网络&#xff08;VAN&#xff09;已…