当前位置: 首页 > news >正文

解决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'}}}}})
}

相关文章:

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

获取最外层box的class&#xff0c;并在内层添加el-scrollbar <template><div class"ChartsBottom"><el-scrollbar><ul class""><li v-for"(item, index) in list" :key"index"><div class"con…...

Java精品项目源码第61期汽车零件销售商城系统(代号V063)

Java精品项目源码第61期汽车零件销售商城系统(代号V063) 大家好&#xff0c;小辰今天给大家介绍一个汽车零件销售商城系统&#xff0c;演示视频公众号&#xff08;小辰哥的Java&#xff09;对号查询观看即可 文章目录 Java精品项目源码第61期汽车零件销售商城系统(代号V063)难…...

Python OpenCV剪裁图片并修改对应的Labelme标注文件

Python OpenCV剪裁图片并修改对应的Labelme标注文件 前言前提条件相关介绍实验环境剪裁图片并修改对应的Labelme标注文件代码实现 前言 由于本人水平有限&#xff0c;难免出现错漏&#xff0c;敬请批评改正。更多精彩内容&#xff0c;可点击进入Python日常小操作专栏、OpenCV-P…...

【JAVA学习笔记】44 - 注解,元注解

项目代码 一、注解的引入 1)注解(Annotation)也被称为元数据(Metadata),用于修饰解释包、类、方法、属性、构造器、局部变量等数据信息。 2)和注释一样&#xff0c;注解不影响程序逻辑&#xff0c;但注解可以被编译或运行&#xff0c;相当于嵌入在代码中的补充信息。 3)在Ja…...

Android 安卓Kotlin-协程

当谈到现代异步编程时&#xff0c;Kotlin协程&#xff08;Kotlin Coroutines&#xff09;是一个备受欢迎的工具。它提供了一种更具可读性和可维护性的方式来处理异步任务&#xff0c;而无需陷入回调地狱。本篇博客将深入探讨Kotlin协程&#xff0c;涵盖其基本概念、用法、特性以…...

SSO 系统设计_token 生成

SSO 系统设计_token 生成 目录概述需求&#xff1a; 设计思路实现思路分析1.增加依赖2.代码编写3.测试 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,make a better result,wai…...

电表安数大小和省电有关吗?

电表的安数是指电表能够正常工作的电流范围&#xff0c;通常用来表示电表的容量。电表的安数越大&#xff0c;表示电表能够承受的电流就越大。电表的安数与省电之间并没有直接的关系&#xff0c;但是电表的安数大小会影响到电表的准确性和稳定性。如果电表的安数太小&#xff0…...

树上形态改变统计贡献:1025T4

http://cplusoj.com/d/senior/p/SS231025D 答案为 ∑ w [ x ] − w [ s o n [ x ] ] \sum w[x]-w[son[x]] ∑w[x]−w[son[x]]&#xff0c; x x x 非儿子 要维护断边&#xff0c;LCT固然可以&#xff0c;但不一定需要 发现如果发生了变化&#xff0c;只会由重儿子变成次重儿子…...

如何处理与智能床相关的医疗建议和医疗器械证明?

如何处理与智能床相关的医疗建议和医疗器械证明&#xff1f; 摘要&#xff1a;作为一名iOS技术博主&#xff0c;我遇到了一个困扰&#xff0c;我的应用在审核中被拒绝了。这次拒绝涉及到我们公司生产的智能床&#xff0c;该床收集用户的体征数据并提供睡眠建议。苹果指出我们未…...

云原生之深入解析如何合并多个kubeconfig文件

项目通常有多个 k8s 集群环境&#xff0c;dev、testing、staging、prod&#xff0c;kubetcl 在多个环境中切换&#xff0c;操作集群 Pod 等资源对象&#xff0c;前提条件是将这三个环境的配置信息都写到本地机的 $HOME/.kube/config 文件中。默认情况下kubectl会查找$HOME/.kub…...

Netty实战-实现自己的通讯框架

通信框架功能设计 功能描述 通信框架承载了业务内部各模块之间的消息交互和服务调用&#xff0c;它的主要功能如下&#xff1a; 基于 Netty 的 NIO 通信框架&#xff0c;提供高性能的异步通信能力&#xff1b;提供消息的编解码框架&#xff0c;可以实现 POJO 的序列化和反序…...

S4.2.4.3 Electrical Idle Sequence(EIOS)

一 本章节主讲知识点 1.1 EIOS的具体码型 1.2 EIOS的识别规则 1.3 EIEOS的具体码型 二 本章节原文翻译 当某种状态下&#xff0c;发送器想要进入电器空闲状态的时候&#xff0c;发送器必须发送EIOSQ&#xff0c;也既是&#xff1a;电器Electrical Idle Odered Set Sequenc…...

MySQL的优化利器:索引条件下推,千万数据下性能提升273%

MySQL的优化利器&#xff1a;索引条件下推&#xff0c;千万数据下性能提升273%&#x1f680; 前言 上个阶段&#xff0c;我们聊过MySQL中字段类型的选择&#xff0c;感叹不同类型在千万数据下的性能差异 时间类型&#xff1a;MySQL字段的时间类型该如何选择&#xff1f;千万…...

回归预测 | MATLAB实现BO-BiLSTM贝叶斯优化双向长短期神经网络多输入单输出回归预测

回归预测 | MATLAB实现BO-BiLSTM贝叶斯优化双向长短期神经网络多输入单输出回归预测 目录 回归预测 | MATLAB实现BO-BiLSTM贝叶斯优化双向长短期神经网络多输入单输出回归预测效果一览基本介绍模型搭建程序设计参考资料 效果一览 基本介绍 MATLAB实现BO-BiLSTM贝叶斯优化双向长…...

SOCKS5代理在全球电商、游戏及网络爬虫领域的技术创新

随着全球化进程的加速&#xff0c;跨界电商和游戏行业的出海战略愈发重要。在这个大背景下&#xff0c;技术如SOCKS5代理和网络爬虫成为连接不同领域、优化用户体验和提升市场竞争力的重要桥梁。本文将深入探讨SOCKS5代理技术在跨界电商、游戏和网络爬虫领域的应用及其对行业发…...

Flutter extended_image库设置内存缓存区大小与缓存图片数

ExtendedImage ExtendedImage 是一个Flutter库&#xff0c;用于提供高级图片加载和显示功能。这个库使用了 image 包来进行图片的加载和缓存。如果你想修改缓存大小&#xff0c;你可以通过修改ImageCache的配置来实现。 1. 获取ImageCache实例: 你可以通过PaintingBinding…...

第2篇 机器学习基础 —(1)机器学习概念和方式

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。机器学习是一种人工智能的分支&#xff0c;它使用算法和数学模型来使计算机系统能够从经验数据中学习和改进&#xff0c;而无需显式地编程。机器学习的目标是通过从数据中发现模式和规律&#xff0c;从而使计算机能够自动进…...

LiveGBS流媒体平台GB/T28181常见问题-海康大华宇视硬件NVR摄像头通道0未获取到视频通道如何排查如何抓包分析

LiveGBS常见问题海康大华宇视硬件NVR摄像头通道0未获取到视频通道如何排查如何抓包分析&#xff1f; 1、硬件NVR配置接入示例2、通道数为0处置2.1、判断信令是否畅通2.1.1、点击更新通道2.1.2、有成功提示2.1.2.1、确认设备的视频通道编码是否填写2.1.2.2、确认是否超过授权数目…...

在项目中同时使用SpringCloud和Dubbo,注册中心选用Eureka?

文章目录 一、前置知识1、在Spring Boot中使用Dubbo&#xff1f;1&#xff09;配置服务提供者2&#xff09;配置服务消费者 2、在Spring Boot中使用Eureka&#xff1f;1&#xff09;Eureka服务2&#xff09;Eureka客户端 二、项目代码分析1、dubbo服务提供者1&#xff09;启动类…...

蓝凌EIS智慧协同平台saveImg接口任意文件上传漏洞复现 [附POC]

文章目录 蓝凌EIS智慧协同平台saveImg接口任意文件上传漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 0x06 修复建议 蓝凌EIS智慧协同平台saveImg接口任意文件上传漏洞复现 [附POC] 0x01 前言 免责声明&…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

GraphQL 实战篇:Apollo Client 配置与缓存

GraphQL 实战篇&#xff1a;Apollo Client 配置与缓存 上一篇&#xff1a;GraphQL 入门篇&#xff1a;基础查询语法 依旧和上一篇的笔记一样&#xff0c;主实操&#xff0c;没啥过多的细节讲解&#xff0c;代码具体在&#xff1a; https://github.com/GoldenaArcher/graphql…...

Linux操作系统共享Windows操作系统的文件

目录 一、共享文件 二、挂载 一、共享文件 点击虚拟机选项-设置 点击选项&#xff0c;设置文件夹共享为总是启用&#xff0c;点击添加&#xff0c;可添加需要共享的文件夹 查询是否共享成功 ls /mnt/hgfs 如果显示Download&#xff08;这是我共享的文件夹&#xff09;&…...