vue.js el-tooltip根据文字长度控制是否提示toolTip

一、需求:如何判断当前文本文字是否超出文本长度,是否需要出现提示toolTip。效果图如下:

二、实现:

1、表格字段鼠标放置el-popover出现 “引用主题” 的具体内容;

<!-- 表格字段:引用主题 -->
<el-table-columnalign="center"header-align="center"width="100"label="引用主题"sortable="custom"prop="refCnt"show-overflow-tooltip
>
<template slot-scope="scope"><span v-if="scope.row.refCnt == '0'" style="color: #f56c6c">0</span><el-popoverv-elseplacement="bottom"width="150"trigger="hover"><ul :data="scope.row?.themeVos" class="ul-popover"><li v-for="(item, index) in scope.row?.themeVos" :key="index"><el-tooltipclass="item"effect="light":content="item?.themeName"placement="top-start":disabled="!isShowTooltip"><!-- visibilityChange:鼠标放置后是否展示省略部分;--><!-- class="overflow":是否超出隐藏出现省略号; --><div @mouseenter="visibilityChange($event)" class="overflow">{{ item?.themeName }}</div></el-tooltip></li></ul><spanstyle="color: #1989fe; cursor: pointer"slot="reference">{{ scope.row.refCnt }}</span></el-popover></template>
</el-table-column>

2、定义isShowTooltip控制是否展示提示文字tooltip;

data() {return {isShowTooltip: false, // 是否显示提示文字}
}

3、对应的鼠标放置触发的方法实现;

 // 是否提示toolTipvisibilityChange(event) {const ev = event.targetconst ev_weight = ev.scrollWidth // 文本的实际宽度   scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。const content_weight = ev.clientWidth // 文本的可视宽度 clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。// const content_weight = this.$refs.tlp.$el.parentNode.clientWidth; // 文本容器宽度(父节点)if (ev_weight > content_weight) {// 实际宽度 > 可视宽度  文字溢出this.isShowTooltip =true} else {// 否则为不溢出this.isShowTooltip = false}},

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

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

相关文章

数据备份(上)

备份的意义 数据备份是容灾的基础&#xff0c;防止系统出现操作失误或者遭受网络攻击导致数据丢失&#xff0c;为保证数据安全和业务连续性&#xff0c;有效的防护措施&#xff0c;对数据进行合理的备份、防范于未然。 面临的威胁 去年2023年10月亲自经历客户某网站无法访问…

WEB-UI自动化测试实践

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…

已解决的问题:BIOS中Enter键失效_BIOS中回车键没反应

问题&#xff1a; 未解决的问题&#xff1a;BIOS中enter键失效_bios回车键没反应-CSDN博客 问题复现&#xff1a; Windows7 关机 开机按F2进入BIOS 调整Boot Mode&#xff0c;按Enter建&#xff0c;Enter键失效 按F10&#xff0c;按Enter键&#xff0c;Enter键失效 按E…

HTML好玩代码(正式版)

今天给大家几个好玩儿的HTML代码&#xff0c;可以自行修改文字&#xff0c;更改效果&#xff08;一定要看到最后&#xff09;&#xff0c;代码&#xff0c;&#x1f389;走起&#xff1a; 一、圣诞树效果&#xff08;音乐可自行选择&#xff09; 代码&#xff1a; <!DOCTY…

vite是什么

vite 是什么 vite —— 一个由 vue 作者尤雨溪开发的 web 开发工具 Vite由两个主要部分组成 dev server&#xff1a;利用浏览器的ESM能力来提供源文件&#xff0c;具有丰富的内置功能并具有高效的HMR生产构建&#xff1a;生产环境利用Rollup来构建代码&#xff0c;提供指令用…

基于情感分析的网上图书推荐系统

项目&#xff1a;基于情感分析的网上图书推荐系统 摘 要 基于网络爬虫的数据可视化服务系统是一种能自动从网络上收集信息的工具&#xff0c;可根据用户的需求定向采集特定数据信息的工具&#xff0c;本项目通过研究爬取网上商品评论信息实现商品评论的情感分析系统功能。对于…

Flutter开发LongPressDraggable、Draggable 的onDragEnd没有被调用

文章目录 onDragEnd 什么时候执行&#xff1f;onDragEnd 在拖动结束时没有被调用的可能原因 onDragEnd 什么时候执行&#xff1f; onDragEnd 回调函数在拖动结束时执行&#xff0c;但要注意&#xff0c;拖动结束有多种情况&#xff0c;不仅仅是松开手指触发的。 onDragEnd 会…

【国产MCU】-CH32V307-通用定时器(GPTM)-单脉冲模式

通用定时器(GPTM)-单脉冲模式 文章目录 通用定时器(GPTM)-单脉冲模式1、单脉冲模式介绍2、驱动API介绍3、单脉冲使用实例本文将详细介绍如何使用CH32V307通用定时器的单脉冲模式。 1、单脉冲模式介绍 单脉冲模式可以响应一个特定的事件,在一个延迟之后产生一个脉冲,延迟…

Seata 的 AT 模式

目录 概述 Springcloud 整合 Seata 数据库脚本 服务依赖 Springboot 配置 代码改造 AT模式下的数据隔离 写隔离 读隔离 概述 Seata 的 AT 模式是 Seata 的默认模式&#xff0c;它的原理是依赖于数据库事务&#xff0c;以数据库事务保证本地事务分支特性&#xff0c;结合…

nginx之web性能location优先级

4.2 event事件 events {worker_connections 65536; #设置单个工作进程的最大并发连接数use epoll;#使用epoll事件驱动&#xff0c;Nginx支持众多的事件驱动&#xff0c;比如:select、poll、epoll&#xff0c;只能设置在events模块中设置。accept_mutex on; #on为同一时刻一个…

设计模式之委派模式

文章目录 前言正文一、生活中的例子二、Java代码实现2.1 类设计2.2 代码实现2.2.1 Employee2.2.2 ArchitectureDesignEmployer2.2.3 BackEmployer2.2.4 FrontEmployer2.2.5 Leader2.2.6 EmployeeStrongPointEnum2.2.7 Boss 2.3 测试2.3.1 Client2.3.2 测试结果 三、委派模式的优…

Docker Desktop 4.27.1 Windows 10 安装 教程

Docker Desktop 4.27.1 Windows 10 安装 版本要求windows 版本要求wsl 版本要求docker desktop 版本 安装首先确保系统版本符合要求前提下安装wsl安装 Dockers Desktop安装说明 安装问题docker Desktop 无法正常启动&#xff0c;提示wsl 相关信息wsl --install 执行输出帮助日志…

springboot大学生体质测试管理系统源码和论文

大学生体质测试管理系统提供给用户一个简单方便体质测试管理信息&#xff0c;通过留言区互动更方便。本系统采用了B/S体系的结构&#xff0c;使用了java技术以及MYSQL作为后台数据库进行开发。系统主要分为系统管理员、教师和用户三个部分&#xff0c;系统管理员主要功能包括首…

第三十九天| 62.不同路径、63. 不同路径 II

Leetcode 62.不同路径 题目链接&#xff1a;62 不同路径 题干&#xff1a;一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “…

十六、多边形填充和绘制

项目功能实现&#xff1a;对多边形进行轮廓绘制和填充 按照之前的博文结构来&#xff0c;这里就不在赘述了 一、头文件 mult-drawing.h #pragma once#include<opencv2/opencv.hpp>using namespace cv;class Mult_Drawing { public:void mult_drawing(); };#pragma onc…

vue如何动态加载显示本地图片资源

在实际开发中&#xff0c;根据某一个变量动态展示图片的情况有很多。实现方法分打包构建工具的差异而不同。 1、webpack的项目 require引入图片资源 2、vite的项目 new URL(url,base).href 疑问解答&#xff1a;为什么vite项目不可以用require&#xff1f; 原因在于&#xf…

Elastic Stack--01--简介、安装

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1. Elastic Stack 简介为什么要学习ESDB-Engines搜索引擎类数据库排名常年霸榜![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/051342a83f574c8c910cda…

微信小程序独立分包与分包预下载

官网链接 独立分包配置方法 独立分包使用限制 独立分包中不能依赖主包和其他分包中的内容&#xff0c;包括 js 文件、模板、wxss、自定义组件等&#xff1b;App 只能在主包内定义&#xff0c;独立分包中不能定义 App&#xff0c;会造成无法预期的行为独立分包中暂时不支持使用…

cocos creator3.x项目打包成aar 加入到已有的Android工程

Cocos crearor版本&#xff1a; 3.4.2 Android Studio Flamingo | 2022.2.1 Patch 2 1、配置构建安卓项目 2、 运行编译无报错 出现问题可尝试修改Gradle版本 修改jdk版本 3、对libservice打包成aar 打包完后 再build/outputs找到aar 如果看不到Tasks模块&#xff0c;在Fil…

人机交互新研究:MIT开发了结合脑电和眼电的新式眼镜,与机器狗交互

还记得之前的AI读心术吗&#xff1f;最近&#xff0c;「心想事成」的能力再次进化&#xff0c; ——人类可以通过自己的想法直接控制机器人了&#xff01; 来自麻省理工的研究人员发表了Ddog项目&#xff0c;通过自己开发的脑机接口&#xff08;BCI&#xff09;设备&#xff…