el-tooltip设置文字溢出时展示否则不展示

news2024/11/19 16:39:15

改写el-tooltip使其支持文字溢出时展示否则不展示,而不是需要使用js设置单独控制        

 新建 src/utils/rewriteElTooltip.js (一模一样 cv就行)

export default function rewriteElTooltip(el) {
  el.props = {
    ...el.props,
    overflow: Boolean, // 为el-tooltip追加名为'overflow'的props属性
  };
  el.methods = {
    ...el.methods,
    // 重写el-tooltip的show方法
    show() {
      // 如果设置了overflow,则判断文字是否溢出,若未溢出则不显示tooltip
      if (this.overflow) {
        if (this.$el.scrollWidth <= this.$el.clientWidth) return;
      }
      // el-tooltip自带的,保留
      this.setExpectedState(true);
      this.handleShowPopper();
    },
  };
}

main.js 中

import Element, { Tooltip } from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import rewriteElTooltip from "@/utils/rewriteElTooltip";
rewriteElTooltip(Tooltip); // 重写el-tooltip的方法 注意一定要放在 Vue.use(ElementUI); 之前
Vue.use(Element);

使用: 添加 overflow 属性即可

<el-tooltip
              overflow
              effect="dark"
              :content="
                (formData.diseaseLocation ? formData.diseaseLocation : '') +
                (formData.diseaseInformation ? formData.diseaseInformation : '')
              "
              placement="top-start"
            >
              <div class="dialog-box-title">
                {{ formData.diseaseLocation }}{{ formData.diseaseInformation }}
              </div>
            </el-tooltip>

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

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

相关文章

docker: Error response from daemon: No command specified.

执行 docker run -it -d -v /home/dell/workspace/workspace/test_192.168.1.202_pipeline:/home/workspace1 --name test_192.168.1.202_pipeline_10 qnx:7.1报错 问题定位&#xff1a;export导入的镜像需要带上command&#xff0c;以下命令查看command信息 docker ps --no…

计算机二级Python基本操作题-序号44

1. # 使用turtle库的turtle.fd()函数和turtle.seth()函数绘制一个边长为100的三角形 import turtle for i in range(3): #绘制三条边turtle.seth(i * 120) #底边行进角度为0&#xff1b;右斜边行进角度为120(按逆时针);左斜边行进角度为240(按逆时针)turtle.fd(100) #边长为100…

甜椒叶病害数据集

1.数据集分为训练集和测试集 2.训练集如下所示 第一个文件夹是细菌斑叶&#xff08;449张&#xff09; 第二个是健康叶子&#xff08;4014张&#xff09; 测试集 细菌斑叶 11张 健康叶子10张 import numpy as np import os import matplotlib.pyplot as plt import cv2impor…

创建个人博客(在文章的列表页,根据文章标题和文章内容实现搜索)

1. 在视图文件增加搜索表单&#xff1a; 在文章列表页的视图文件中&#xff0c;增加一个搜索表单&#xff0c;包含一个文本搜索框和一个提交按钮 <% form_tag articles_path, method: :get do %><% text_field_tag :title, params[:title], placeholder: "搜索…

关于拓扑排序

又重新学了一下拓扑排序&#xff0c;这次发现就十分简单了&#xff0c;拓扑排序的步骤 1.他必须是一个有向无环图&#xff0c;起点我们就是入度为0的点 2.我们首先要输出的就是入度为0的点&#xff0c;然后依次删除这些点连向的点&#xff0c;使这些点的入度-1&#xff0c;如果…

Java POI 基于模板导出列表数据

目录 1、基于POI模板导出列表数据 &#x1f4da;1.1、需求 &#x1f4dd;1.2、思路 &#x1f331;1.3、实现 &#x1f3e1; 2、导出用户详细数据 &#x1f64e;2.1、需求 &#x1f4bc;2.2、思路 &#x1f468;‍&#x1f4bb;2.3、实现 &#x1f46d; 3、导出数据带图片、公式…

基于STM32设计的数显热水器

一、项目介绍 当前介绍的项目是基于 STM32F103ZET6 系列 MCU 设计的数显热水器&#xff0c;通过显示屏来显示热水器的温度及其工作状态&#xff0c;通过 PT100 传感器来检测热水器的温度变化&#xff0c;并通过电加热片实现加热过程&#xff0c;以达到控制热水器温度的目的。 …

虚拟机之间配置免密登录

目录 一、配置主机名映射 二、虚拟机配置SSH免密登录 三、验证 一、配置主机名映射 即修改/etc/hosts文件&#xff0c;将几台服务器和主机名进行映射。 注意每台服务器都要进行同样的配置。这样在各自服务器下&#xff0c;我们就可以通过主机名访问对应的ip地址了。 当然&…

拿捏--->打印菱形

文章目录 题目描述算法思路代码示例 题目描述 在屏幕上输出以下图案&#xff1a; 算法思路 代码示例 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> int main() {int n;scanf("%d", &n);//上半部分菱形for (int i 0; i < n; i) //上半部分…

LinearAlgebraMIT_6_ColumnSpaceAndNullSpace

这节课的两个重点是column space列空间和null space零空间。 x.1 pre-multiply/left multiply and post-multiply/right multiply 对于pre-multiply/left multiply左乘和post-multiply/right multiply右乘&#xff0c;如果用英文的pre-和post-是比较容易理解的&#xff0c; A…

Promise用法

学习了promise之后&#xff0c;有点懂但让我说又说不出来&#xff0c;参考别人的记录一下。 1.什么是promise&#xff1f; 2.promise解决了什么问题 3.es6 promise语法 &#xff08;1&#xff09;then链式操作语法 &#xff08;2&#xff09;catch的语法 &#xff08;3&#xf…

DataX 异构数据贴源同步产品 - 技术分享篇(一)

DataX 是阿里开源的一个异构数据源离线同步工具&#xff0c;致力于实现包括关系型数据库(MySQL、Oracle等)、HDFS、Hive、ODPS、HBase、FTP等各种异构数据源之间稳定高效的数据同步功能。 DataX设计理念 DataX本身作为数据同步框架&#xff0c;将不同数据源的同步抽象为从源头…

springboot自定义错误消息

为了提供自定义错误消息提示&#xff0c;springboot在resources目录下&#xff0c;有一个文件ValidationMessages.properties 用于存储 验证错误的消息提示&#xff1a; 比如&#xff1a; 这样一个ValidationMessage.properties username.notempty用户名不能为空 username.len…

【RTT驱动框架分析04】-I2C驱动框架分析

IIC RT-Thread IIC 应用编程 2.驱动分析 IIC总线设备继承自io设备驱动框架&#xff0c;RTT对IIC就只有2层的封装 IIC设备总线&#xff0c;在RTT内部有软件IIC和硬件IIC 设备驱动注册 rt_err_t rt_i2c_bus_device_register(struct rt_i2c_bus_device *bus,const char …

第六章:SpringMVC上

第六章&#xff1a;SpringMVC上 6.1&#xff1a;SpringMVC简介 什么是MVC MVC是一种软件架构的思想&#xff0c;将软件按照模型、视图、控制器来划分。 M&#xff1a;Model&#xff0c;模型层&#xff0c;指工程中的JavaBean&#xff0c;作用是处理数据。 一类称为实体类Bean&…

Hololens2二维码识别

配置 目前大部分Hololens进行二维码识别的开发都是基于ZXing的包完成&#xff0c;首先需要完成zxing.unity.dll&#xff0c;很多地方应该都能下载&#xff0c;也可以直接上github上下载&#xff08;下载点这里&#xff09;。 下载时注意一下版本就好&#xff0c;过老的zxing兼…

shell脚本中set -e的作用

set -e作用描述&#xff1a;shell中脚本运行中可能出现命令执行失败的情况&#xff0c;如果执行失败对后续有影响那么就应该退出脚本&#xff0c;不继续往下执行。set -e 命令就可以避免操作失败还继续往下执行的问题。 #!/bin/shset -eecho "make axp ..."VERSION$…

JVM-运行时数据区

目录 什么是运行时数据区&#xff1f; 方法区 堆 程序计数器 虚拟机栈 局部变量表 操作数栈 动态连接 运行时常量池 方法返回地址 附加信息 本地方法栈 总结&#xff1a; 什么是运行时数据区&#xff1f; Java虚拟机在执行Java程序时&#xff0c;将它管…

BI报表工具有哪些作用?奥威BI全面剖析数据

BI报表工具有哪些作用&#xff1f;主要的作用是通过整合多业务来源数据&#xff0c;全面分析挖掘数据&#xff0c;来帮助企业实现数据化运营、支持智能决策、实现数据资产沉淀和增值、进行数据挖掘和预测分析、提高数据可读性和数据可视化程度等&#xff0c;从而提高企业的竞争…

目标用户特征分析常见4大方法

用户特征分析直接影响需求分析、用户体验设计等软件开发的关键环节&#xff0c;如果不对用户特征进行科学分析&#xff0c;不能获得用户真实意图&#xff0c;这直接影响需求分析质量&#xff0c;对整个项目影响较大。 因此我们需要用科学的方法对目标用户进行特征分析。而常见的…