基于el-tooltip组件封装超出显示省略号,鼠标hover显示tooltip的组件

news2024/12/22 18:40:03

基于el-tooltip组件封装超出显示省略号,鼠标hover显示tooltip的组件

el-tooltip组件存在的问题:

  • el-tooltip没有行超出显示省略号的功能
  • 使用了该组件每个hover都会显示tooltip,没有满足超出才显示的需求。

基于el-tooltip组件,实现一个超出行才显示hover tip的组件

<template>
  <el-tooltip :disabled="!isShow" v-bind="$attrs">
    <template #content>
      <slot name="content">{{ props.content }}</slot>
    </template>
    <div class="content" :style="{width: props.width}" @mouseover="showTooltip">
   <span ref="contentRef">
     <slot>{{ props.content }}</slot>
   </span>
    </div>
  </el-tooltip>
</template>

<script setup lang="ts">
import { ref } from "vue";

interface props {
  content: string;
  width: string;
}

const props = withDefaults(defineProps<props>(), {
  content: "",
  width: "",
});

const isShow = ref(true);
const contentRef = ref();
const showTooltip = () => {
  //  判断行元素width是否超过父元素width,超过才显示el-tooltip
  if (contentRef.value?.parentNode.offsetWidth < contentRef.value?.offsetWidth) {
    isShow.value = true;
  } else {
    isShow.value = false;
  }
};
</script>

<style scoped>
.content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>

效果
请添加图片描述


参考:https://juejin.cn/post/7011037199411970056

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

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

相关文章

双视觉Transformer(Dual Vision Transformer)

摘要 已经提出了几种策略来减轻具有高分辨率输入的自注意机制的计算&#xff1a;比如将图像补丁上的全局自注意过程分解成区域和局部特征提取过程&#xff0c;每个过程都招致较小的计算复杂度。尽管效率良好&#xff0c;这些方法很少探索所有补丁之间的整体交互&#xff0c;因…

C++ : 仿照Vector 手动实现自己的 MyVectory

1. 源代码 #include <iostream>using namespace std;template <typename T> class myVector { private:T* data;int size;int capacity; public:// 构造函数myVector() : data(nullptr), size(0), capacity(0) {}//拷贝构造函数myVector(const myVector& othe…

【LeetCode每日一题】——面试题10.11.峰与谷

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时间频度】九【代码实现】十【提交结果】 一【题目类别】 排序 二【题目难度】 中等 三【题目编号】 面试题10.11.峰与谷 四【题目描述】 在一个整数…

Vue学习笔记总结

目录 1、Vue核心 1.1什么是vue? 1.2什么是mvvm? ​编辑 1.3插值表达式{{}} 2.Vue中的常用指令 2.1内容渲染指令 2.2条件渲染指令 2.3事件绑定指令 2.4属性绑定指令 2.5列表渲染指令 2.5.1小案例-小黑的书架 2.6v-for中的key 2.7双向绑定指令 3.指令修饰符 3.1什…

前端JavaScript修饰器:简化代码,增强功能

​ &#x1f3ac; 岸边的风&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! ​ 目录 引言 1. 修饰器简介 2. 修饰器语法 3. 类修饰器 应用场景 示例代码 4. 方法修饰器 应用场景 示例代码 5. 属性…

如何隐藏Selenium特征实现自动化网页采集

Selenium是一个流行的自动化网页测试工具&#xff0c;可以通过模拟用户在Chrome浏览器中的操作来完成网站的测试。然而&#xff0c;有些网站会检测浏览器是否由Selenium驱动&#xff0c;如果是&#xff0c;就会返回错误的结果或拒绝访问。为了避免这种情况&#xff0c;我们需要…

文件夹怎么保护?文件夹保护的方法有哪些?

文件夹是存储文件的功&#xff0c; 而保护文件夹可以有效地避免数据泄露&#xff0c;那么文件夹该怎么保护呢&#xff1f;下面我们就来了解一下吧。 文件夹保护3000 保护文件夹的方法除了加密之外&#xff0c;还有隐藏和伪装&#xff0c;而这些都可以通过文件夹保护3000来实现…

嵌入式学习笔记(33)S5PV210的第二阶段处理过程

&#xff08;1&#xff09;第一个过程&#xff0c;怎么找到具体是哪个中断&#xff1a;S5PV210中因为支持的中断源很多&#xff0c;所以直接设计了4个中断寄存器&#xff0c;每个32位&#xff0c;每位对应一个中断源。&#xff08;理论上210最多可以支持128个中断源&#xff0c…

打造生产级Llama大模型服务

对于任何想要尝试人工智能或本地LLM&#xff0c;又不想因为意外的云账单或 API 费用而感到震惊的人&#xff0c;我可以告诉你我自己的旅程是如何的&#xff0c;以及如何开始使用廉价的消费级硬件执行Llama2 推理 。 这个项目一直在以非常活跃的速度发展&#xff0c;这使得它非…

视频号挂公众号链接最新方法教程,非常给力,使用的朋友不亦乐乎

接着看看视频号挂链接发展的来龙去脉 要点一&#xff1a;早在前两年&#xff0c;视频号链接直接显示在视频上方&#xff0c;可直接点击&#xff0c;哇塞&#xff0c;做视频号的福音&#xff0c;怎么能这么给力呢&#xff0c;引流不是特别方便吗&#xff0c;好景不长&#xff0c…

目前广州股票开户交易佣金费率最低是多少?怎么申请低佣金账户?

股票开户是指投资者在证券公司或券商处申请开立证券账户&#xff0c;并获得购买和交易股票的资格。一般需要提供身份证明、个人信息、资产证明等材料&#xff0c;并签署相关协议和风险提示书。开户后&#xff0c;投资者可以通过证券账户进行股票买卖等交易活动。 目前广州股票…

Vue奶茶冷饮店在线点单系统管理系统 微信小程序

奶茶店管理系统采用了java语言&#xff0c;开发了功能完备、使用简单的前端应用程序&#xff0c;并建立、维护了一个数据完整、安全、稳定性强的后台数据库系统。 系统使用java语言和Mysql数据库作为设计工具&#xff0c;可简单易行地学习操作。用户角色之间的相结合开发一套奶…

微服务全栈:深入核心组件与开发技巧

文章目录 1.服务注册与发现1.1. 客户端注册 (ZooKeeper)1.2. 第三方注册 (独立的服务Registrar)1.3. 客户端发现1.4. 服务端发现1.5. Consul1.6. Eureka1.7. SmartStack1.8. Etcd 2. API 网关2.1. 请求转发2.2. 响应合并2.3. 协议转换2.4. 数据转换2.5. 安全认证 3. 配置中心3.…

A股风格因子看板 (2023.09 第04期)

该因子看板跟踪A股风格因子&#xff0c;该因子主要解释沪深两市的市场收益、刻画市场风格趋势的系列风格因子&#xff0c;用以分析市场风格切换、组合风格暴露等。 今日为该因子跟踪第04期&#xff0c;指数组合数据截止日2023-08-31&#xff0c;要点如下 近1年A股风格因子检验统…

点亮你的证件照!自制背景颜色修改脚本揭秘!

文章目录 &#x1f31d;前言&#x1f31a;重要的工具 - removebg&#x1f311;removebg介绍&#x1f312;拿到API KEY &#x1f31a;脚本的使用教程&#x1f4da;资源 专栏Python零基础入门篇&#x1f525;Python网络蜘蛛&#x1f525;Python数据分析Django基础入门宝典&#x…

【UnityShaderLab实现“Billboard“始终面向相机_播放序列图的效果_案例分享(内附源码)】

"Billboard"始终面向相机 Shader "billboard" {Properties{_MainTex ("Main Tex", 2D) = "white" {}_Color (

GUN、MIT、Apache、BSD、MPL各种开源协议介绍和区别

文章目录 目前主流的开源协议GNU通用公共许可证&#xff08;GNU General Public License&#xff0c;GPL&#xff09;MIT许可证Apache许可证BSD许可证MPL Mozilla公共许可证&#xff08;Mozilla Public License&#xff0c;MPL&#xff09; 各种主流开源协议的区别GNU通用公共许…

IP地址的表示方式与分类

一、IP地址简介 IP地址是互联网的协议地址&#xff0c;为互联网的每一个网络和每一台主机分配一个逻辑地址。IP协议是为了计算机互相连接进行通信而设计的协议。 二、IP地址的表示方式 IP地址是一个32位的二进制数&#xff0c;通常被分割为4个“8位二进制数”(也就相当于四个…

数学建模| 快速入门(以华为杯2019F题为例)

数学建模快速入门&#xff08;华为杯2019F题为例&#xff09; 参考论文华为杯2019F题第一问为例读题——筛选出有用的信息问题分析——搞清楚目标和要求建立模型——将实际问题转化为数学问题判断题目类型模型假设数据处理航迹规划模型建立 模型求解——实际求解的细节结果分析…

JAVA黑马程序员day12--集合进阶(下部--双列集合)

Map HashMap 练习一 需提前定义学生类&#xff0c;并重写HashMap方法&#xff08;不然无法覆盖&#xff09; public class MapDemo4 {public static void main(String[] args) {//1.创建HashMap对象HashMap<Student,String> hmnew HashMap<>();//2、创建3个学生对…