当前位置: 首页 > 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 前言 免责声明&…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

九天毕昇深度学习平台 | 如何安装库?

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

为什么要创建 Vue 实例

核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...