判断文本元素是否出现省略号,根据文本长度来控制是否显示鼠标悬浮提示el-tooltip

news/2024/7/10 0:58:37 标签: 前端, vue, elementui

需求:循环出来的数据,根据文本长度来控制是否显示鼠标悬浮提示el-tooltip
实现:监听窗口宽度,宽度改变,获取标签元素,判断可视窗口宽度与元素宽度大小,改变渲染与否
HTML部分

<div class="right-p4" v-for="(item, index) in overallResultsData.radarChart" :key="index">
   <el-tooltip class="item" effect="dark" :content="(index + 1) + '. ' + item.name + ':' +item.des" placement="bottom-start" v-if="ellipsisList.includes(index)">
      <p class="ellipsis"><span class="right-p4-name-black">{{ (index + 1) + '. ' + item.name + ':' }}</span><span class="right-p4-name-gray">{{ item.des}}</span>
      </p>
    </el-tooltip>
   <p class="ellipsis" v-else><span class="right-p4-name-black">{{ (index + 1) + '. ' + item.name + ':' }}</span><span class="right-p4-name-gray">{{ item.des}}</span></p>
</div>

JS部分

beforeDestroy () {
    window.removeEventListener('resize', this.handleResize)
  },
  mounted () {
    window.addEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize () {
      this.ellipsisList = []
      const boxes = document.getElementsByClassName('ellipsis')
      for (let i = 0; i < boxes.length; i++) {
        const box = boxes[i]
        if (box.scrollWidth > box.offsetWidth) {
          // 如果显示省略号,则使用 el-tooltip 显示完整内容
          this.ellipsisList.push(i)
        }
      }
    },
  }

http://www.niftyadmin.cn/n/5101614.html

相关文章

如何在 Python 中创建一个虚拟环境,以及为什么需要它

当用 Python 开发软件时&#xff0c;一个基本的方法是在你的机器上安装 Python&#xff0c;通过终端安装所有需要的库&#xff0c;在一个 .py 文件或笔记本中编写所有的代码&#xff0c;并在终端运行你的 Python 程序。 这是很多初学者和很多从使用 Python 进行数据分析过渡的…

【Netty专题】【网络编程】从OSI、TCP/IP网络模型开始到BIO、NIO(Netty前置知识)

目录 前言前置知识一、计算机网络体系结构二、TCP/IP协议族2.1 简介*2.2 TCP/IP网络传输中的数据2.3 地址和端口号2.4 小总结 三、TCP/UDP特性3.1 TCP特性TCP 3次握手TCP 4次挥手TCP头部结构体 3.2 UDP特性 四、总结 课程内容一、网络通信编程基础知识1.1 什么是Socket1.2 长连…

covfefe 靶机/缓冲区溢出

covfefe 信息搜集 存活检测 详细扫描 后台网页扫描 80 端口 31337 端口 网页信息搜集 分别访问扫描出的网页 说有三个不允许看的内容 尝试访问 第一个 flag 访问 .ssh 文件 继续根据提示访问 获取了三个 ssh 文件 ssh 登录 在下载的 id_rsa_pub 公钥文件中发现了…

从0开始编写BP,附加动量因子的BP神经网络,不使用MATLAB工具箱,纯手写matlab代码,以BP分类为例...

本篇文章以BP分类为例&#xff08;也可以做预测&#xff09;&#xff0c;纯手写BP神经网络。附加动量因子的BP神经网络。 编程时&#xff0c;激活函数选择Sigmoid函数&#xff0c;使用者也可以根据需要自行更改&#xff01; 以经典的红酒数据分类为例&#xff0c;红酒数据大小为…

【送书福利-第十九期】《C++ Core Guidelines解析》

&#x1f60e; 作者介绍&#xff1a;我是程序员洲洲&#xff0c;一个热爱写作的非著名程序员。CSDN全栈优质领域创作者、华为云博客社区云享专家、阿里云博客社区专家博主、前后端开发、人工智能研究生。公粽号&#xff1a;程序员洲洲。 &#x1f388; 本文专栏&#xff1a;本文…

Linux块设备缓存Bcache使用

1 Bcache简介 Bcache是Linux内核块层cache&#xff0c;它使用SSD来作为HDD硬盘的cache&#xff0c;从而起到加速作用。Bcache内核模块仅在Linux 3.10及以上版本支持&#xff0c;因此使用Bcache&#xff0c;需要将内核升级到3.10及以上版本&#xff0c;并在内核配置项中打开Bca…

科技新宠!拓世AI智能直播一体机揭秘,颠覆教学模式!

数字时代的铺展下&#xff0c;短视频和直播电商行业呈现出爆发式的增长&#xff0c;这种趋势正在日益融入人们的日常生活中&#xff0c;让短视频带货和直播带货逐渐成为一种独具中国特色的现象。与此同时&#xff0c;市场对专业人才的渴求也日渐加剧。国家以及相关地方政府纷纷…

零信任身份管理平台,构建下一代网络安全体系

随着数字化时代的到来&#xff0c;网络安全已成为企业和组织面临的一项重要挑战。传统的网络安全方法已经无法满足不断演变的威胁和技术环境。近期&#xff0c;中国信息通信研究院&#xff08;简称“中国信通院”&#xff09;发布了《零信任发展研究报告&#xff08; 2023 年&a…