动态el-tooltip

介绍了一个Vue组件,该组件能够根据其父元素的宽度实时决定是否显示Tooltip。通过监听鼠标悬停事件并比较文本内容与父元素宽度来实现这一功能。

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

实时根据内容宽度选择是否展示tooltip
可是直接复制成一个组件
外层的父级需要控制宽度,
父级元素可以有很多子元素

<template>
  <div class="text-tooltip">
    <el-tooltip
      class="item"
      effect="dark"
      :disabled="isShowTooltip"
      :content="content"
      placement="top"
      :open-delay="300"
    >
      <p
        class="over-flow"
        :class="className"
        @mouseover="onMouseOver(refName)"
      >
        <span :ref="refName">{{content||'-'}}</span>
      </p>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: 'textTooltip',
  props: {
    // 显示的文字内容
    content: {
      type: String,
      default: () => {
        return ''
      }
    },
    // 外层框的样式,在传入的这个类名中设置文字显示的宽度
    className: {
      type: String,
      default: () => {
        return ''
      }
    },
    // 为页面文字标识(如在同一页面中调用多次组件,此参数不可重复)
    refName: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data() {
    return {
      isShowTooltip: true
    }
  },
  methods: {
    onMouseOver(str) {
      let parentWidth = this.$refs[str].parentNode.offsetWidth;
      let contentWidth = this.$refs[str].offsetWidth;
      // 判断是否开启tooltip功能
      if (contentWidth > parentWidth) {
        this.isShowTooltip = false;
      } else {
        this.isShowTooltip = true;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.over-flow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.text-tooltip {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
p {
  margin: 0;
}
</style>
### 如何在 Element UI 的 `<el-tooltip>` 组件中实现动态换行 要在 Element UI 中通过 `<el-tooltip>` 实现动态换行,可以结合 HTML 和 CSS 来完成。以下是具体的解决方案: #### 使用 `slot` 插槽自定义内容并设置样式 可以通过将提示内容放入 `<div>` 并利用 `slot="content"` 自定义工具提示框的内容来解决换行问题。具体代码如下所示[^1]: ```html <el-tooltip class="item" effect="dark" placement="top"> <i class="el-icon-question smartTip"></i> <div slot="content" style="white-space: pre-wrap; width: 200px;"> 创建创意时从视频中自动抽取多帧图片优选生成封面, 本方案无需手动上传图片。 </div> </el-tooltip> ``` 上述代码的关键在于设置了 `style="white-space: pre-wrap;"` 属性,该属性允许文本在遇到换行符 `\n` 或者到达指定宽度时自动换行。 --- #### 在表格列中应用 Tooltip 动态换行 对于更复杂的场景,比如在 `<el-table>` 列表中使用 Tooltip 显示较长的文字内容,可以通过关闭 `show-overflow-tooltip` 属性,并添加插槽来自定义 Tooltip 的行为和样式[^2]。示例如下: ```html <el-table-column :sortable="true" label="错误消息"> <template slot-scope="scope"> <el-tooltip placement="top-start"> <div slot="content" class="text_warp" style="white-space: pre-wrap; max-width: 300px;"> {{ scope.row.errMsg }} </div> <div style="color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> {{ scope.row.errMsg }} </div> </el-tooltip> </template> </el-table-column> ``` 在此案例中,`white-space: pre-wrap` 被用于确保当内容超过设定的最大宽度 (`max-width`) 时能够正常换行。同时,外部容器的 `white-space: nowrap` 配合 `text-overflow: ellipsis` 可以让超长文字部分省略显示。 --- #### 处理动态显示/隐藏的需求 针对某些特殊需求,如仅在鼠标悬停于溢出区域时才触发 Tooltip 提示,而非始终展示 Tooltip,可通过 JavaScript 结合条件渲染逻辑实现[^3]。下面是一个简单的例子: ```javascript methods: { isOverflowed(el) { return el.scrollWidth > el.clientWidth; } } ``` HTML 结构则需稍作调整以便判断当前 DOM 是否存在溢出情况: ```html <div ref="cellContent" @mouseenter="handleMouseEnter($event)"> <!-- 表格单元格内容 --> </div> <script> export default { methods: { handleMouseEnter(event) { const targetEl = event.target; this.$refs.tooltipRef.disabled = !this.isOverflowed(targetEl); }, isOverflowed(el) { return el.scrollWidth > el.clientWidth; } } }; </script> ``` 此方法的核心思路是在事件监听器中检测目标元素是否有溢出现象,进而决定是否禁用 Tooltip--- ### 总结 以上三种方式分别适用于不同场景下的 `<el-tooltip>` 动态换行需求。无论是简单页面还是复杂数据表格环境,都可以灵活运用这些技巧达成预期效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值