el-tooltip的二次封装，文字过长省略，hover时悬浮，不省略不悬浮

阿乐今天敲代码没

已于 2022-10-25 16:38:00 修改

阅读量960

点赞数 2

分类专栏：笔记文章标签： vue.js javascript 前端

于 2022-10-21 15:41:59 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45840993/article/details/127447384

版权

这是一个关于Vue.js的博客，作者分享了一个对el-tooltip组件的二次封装方法，旨在解决当绑定元素内容过长时如何自动省略并仅在鼠标悬停时显示完整内容的问题。通过监听mouseover事件和计算元素宽高，实现了在内容超出父元素宽度时隐藏显示，否则保持默认状态的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-tooltip是我们的常用组件，但是无法判断绑定元素是否过长需要省略的，此组件对el-tooltip的二次封装，文字过长省略，hover时悬浮，未超出长度限制时不显示，代码如下

<template>
  <div class="text-tooltip">
    <el-tooltip
      class="item"
      :disabled="isShowTooltip"
      :content="props.content"
      placement="top"
      popper-class="tooltip"
    >
      <div class="over-flow" :class

最低0.47元/天解锁文章