el-tooltips设置文字超出省略才显示

news2024/9/27 5:58:07

定义一个全局的自定义指令,一般来说是在directive文件夹下新建文件,复制下面的代码

/**
* tooltip-auto-show tooltip不超长则不显示
*/
import Vue from 'vue'
import { getStyle } from 'element-ui/src/utils/dom'
export default {
  inserted(el, binding, vnode) {
    el.__vueOverflowTooltipMouseenter__ = function(e) {
      const defalutSilent = !!Vue.config.silent
      Vue.config.silent = true
      vnode.componentInstance.disabled = true
      const range = document.createRange()
      range.setStart(el, 0)
      range.setEnd(el, el.childNodes.length)
      const rangeWidth = range.getBoundingClientRect().width
      const padding = (parseInt(getStyle(el, 'paddingLeft'), 10) || 0) + (parseInt(getStyle(el, 'paddingRight'), 10) || 0)

      if (binding.value?.canChangeScale && el.offsetWidth < el.getBoundingClientRect().width) { // 可缩放页面:getBoundingClientRect().width值会受scale缩放影响
        const deviationValue = range.getBoundingClientRect().width - el.getBoundingClientRect().width
        if (deviationValue !== 0 && deviationValue > 0.1) { // 忽略0.1以下的偏差
          const elWidth = el.getBoundingClientRect().width
          // 1行省略
          if (rangeWidth + padding > elWidth || el.scrollWidth > elWidth) {
            vnode.componentInstance.disabled = false
          }
        }
      } else {
        const elWidth = el.offsetWidth
        // 1行省略
        if (rangeWidth + padding > elWidth || el.scrollWidth > elWidth) {
          vnode.componentInstance.disabled = false
        }
      }
      // 处理多行省略
      if (getStyle(el, '-webkit-line-clamp') > 1 && el.scrollHeight > el.offsetHeight) {
        vnode.componentInstance.disabled = false
      }
      Vue.config.silent = defalutSilent
    }
    el.addEventListener('mouseenter', el.__vueOverflowTooltipMouseenter__)
  },
  unbind: function(el) {
    el.removeEventListener('mouseenter', el.__vueOverflowTooltipMouseenter__)
    delete el.__vueOverflowTooltipMouseenter__
  }
}

在使用el-tooltips的文件中引入

import tooltipAutoShow from './module/tooltipAutoShow'

Vue.directive('tooltip-auto-show', tooltipAutoShow)

并且这样使用

<el-tooltip v-tooltip-auto-show class="" effect="dark" :content="data.name" placement="top-start">
    <div>{{ data.name }}</div>
</el-tooltip>

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

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

相关文章

ISA Server配置https踩坑全过程

首先普通的http配置请参考 【ISA Server 2006发布Web网站】 https://www.bilibili.com/video/BV1qc411v75w/?share_sourcecopy_web&vd_sourcef35b2f2d0d34140bcba81b8b6f8c1b69 本文只一笔带过&#xff0c;讲一下https部分。 正解 由于我维护的是windows server 2003的…

付费进群V5版本首发源码

付费进群V5版本首发 最新分站大屏 更新三个模板 仿官方模板等等 最新防注入技术 源码下载&#xff1a;https://download.csdn.net/download/m0_66047725/89797314 更多资源下载&#xff1a;关注我。

Postgresql怎么查询数据库中所有的表,odoo17数据库最依赖表整理

今天遇到了一个需求,需要梳理odoo中数据库表的分类,所以想要知道怎么查询当前数据库中所有的表,特此记录. 一个简单的SQL语句: select * from pg_tables;得到的结果如下: 显然这个有点杂乱,我们换一个SQL语句: select tablename from pg_tables where schemanamepublic不过…

LiveQing视频点播流媒体RTMP推流服务功能-支持电子放大拉框放大直播视频拉框放大录像视频流拉框放大电子放大

LiveQing视频点播流媒体RTMP推流服务功能-支持电子放大拉框放大直播视频拉框放大录像视频流拉框放大电子放大 1、鉴权直播2、视频点播3、RTMP推流视频直播和点播流媒体服务 1、鉴权直播 鉴权直播-》播放 &#xff0c;左键单击可以拉取矩形框&#xff0c;放大选中的范围&#x…

(四)悟说几个特殊矩阵及矩阵函数

上一期介绍了矩阵的出现源于解线性方程组。但是&#xff0c;矩阵出现之后&#xff0c;就犹如打开了潘多拉的盒子&#xff0c;会产生许多魔法。 1 旋转矩阵 我们知道用矩阵左乘某个向量&#xff0c;相当于对该向量做线性变换。那么是否有一种矩阵&#xff0c;能让向量旋转&…

前端项目代理到本地调试

我们在项目开发中&#xff0c;有时mock数据不能满足我们的需求&#xff0c;可以考虑把线上地址运行在本地代码上进行开发调试&#xff0c;也就是所谓的代理 这里推荐使用的工具是 whistle SwitchyOmega 1. 首先在chrome浏览器中安装插件SwitchyOmega 下载地址 CrxDL - 下载…

Git - 初识版本库

版本库也叫仓库&#xff0c;英文名 repository。 ‍ 创建版本库 之前我们说了版本库的概念&#xff1a; 存储版本的地方&#xff08;存放各个版本之间差异的地方&#xff09;&#xff0c;通常称为版本库。通常版本库是以文件&#xff08;夹&#xff09;的形式存放在磁盘上&a…

【数据结构初阶】排序算法(上)插入排序与选择排序

文章目录 1.排序概念及运用1. 1 概念1. 2 运用1.3 常见排序算法 2. 插入排序2. 1 直接插入排序2. 2 希尔排序2. 2. 1 希尔排序的时间复杂度 3. 选择排序3. 1 直接选择排序3. 2 堆排序3. 3 Top-K问题 1.排序概念及运用 1. 1 概念 排序&#xff1a;所谓排序&#xff0c;就是使一…

小米2025届软件开发工程师(C/C++/Java)(编程题AK)

选择题好像也是25来个 编程题 T1 题目描述 小明喜欢解决各种数学难题。一天&#xff0c;他遇到了一道有趣的题目:他需要帮助他的朋友们完成一个排序任务。小明得到两个长度为 n 的数组a[]和b[]。他可以在两个数组对应位置进行交换&#xff0c;即选定一个位置 i &#xff0c…

PCL 求八叉树的体素中心

目录 一、概述 1.1原理 1.2实现步骤 1.3应用场景 二、代码实现 2.1关键函数 2.1.1 八叉树构建 2.1.2 获取体素中心 2.2完整代码 三、实现效果 PCL点云算法汇总及实战案例汇总的目录地址链接&#xff1a; PCL点云算法与项目实战案例汇总&#xff08;长期更新&#xf…

注意力机制篇 | YOLOv8改进之在C2f模块引入EffectiveSE注意力模块 | 基于SE注意力

前言:Hello大家好,我是小哥谈。EffectiveSE(Effective Squeeze-Excitation) 是一种改进的通道注意力模块,其目的是在保持模型性能的同时减少计算复杂性和信息丢失。它基于原始的 Squeeze-Excitation (SE) 模块,但通过一些关键的改进来提高效率。🌈 目录 🚀1.基…

前端——flex布局

flex布局——弹性布局 传统布局: 浮动 定位 行内块等 1. flex布局 方法简单 不需要计算 能自动分配父级里面的子元素排版 对齐方式等等 >flex布局 可以适应不同屏幕布局 2. flex布局使用 - 给父级盒子 display: flex 开启弹性盒模型 - 子元素就会默…

栈的基本概念和及具体实现

今天给大家介绍一下栈的基本概念及实现&#xff01;话不多说&#xff0c;立即开始&#xff01; 1.栈的概念&#xff1a; 一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈 顶&#xff0c;另一端称为栈底。栈中的…

计算机网络--TCP、UDP抓包分析实验

计算机网络实验 目录 实验目的 实验环境 实验原理 1、UDP协议 2、TCP协议 实验具体步骤 实验目的 1、掌握使用wireshark工具对UDP协议进行抓包分析的方法&#xff0c;掌握UDP协议的报文格式&#xff0c;掌握UDP协议校验和的计算方法&#xff0c;理解UDP协议的优缺点&am…

vant van-pull-refresh + van-list实现list列表支持搜索和下拉刷新

1 介绍 在使用 van-pull-refresh van-list实现list列表下拉刷新时遇到几个问题在这里进行一个总结。 2 出现的问题 问题一&#xff1a;当van-pull-refresh van-list组合使用时&#xff0c;下拉刷新会调用两个加载图标。 解答&#xff1a;去除van-pull-refresh加载图标&…

leetcode-189:轮转数组

给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 示例 1: 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 解释: 向右轮转 1 步: [7,1,2,3,4,5,6] 向右轮转 2 步: [6,7,1,2,3,4,5] 向右轮转 3 步: [5,6,7,1,2,3,4…

快讯:腾讯轻量服务器四周年,最低一折续费,还有免费升配

最近腾讯云轻量服务器四周年庆开始了&#xff0c;免费升级配置&#xff0c;续费服务器最低一折。 最低一折续费&#xff1a; 持有多久的轻量服务器决定续费几折&#xff0c;已经持有四年就是一折&#xff0c;三年1.5折以此类推。 免费升级配置&#xff1a; 2-4-5免费升级到…

String类常用的方法

源代码&#xff1a; 输出结果&#xff1a;

Linux 之 logrotate 【日志分割】

简介 logrotate 是一个用于管理日志文件的工具。它可以自动对日志文件进行轮转、压缩、删除等操作&#xff0c;以防止日志文件无限增长占用过多磁盘空间。logrotate 通常作为一个守护进程定期运行&#xff0c;也可以通过 cron 任务来调度执行 工作原理 按照配置文件中的规则…

【Mysql多数据源实现读写分离的几种方案】

文章目录 一.什么是MySQL 读写分离二.读写分离的几种实现方式(手动控制)1.基于Spring下的AbstractRoutingDataSource1.yml2.Controller3.Service实现4.Mapper层5.定义多数据源6.继承Spring的抽象路由数据源抽象类&#xff0c;重写相关逻辑7. 自定义注解WR&#xff0c;用于指定当…