vue.js el-tooltip根据文字长度控制是否提示toolTip问题

 更新时间:2024年02月28日 09:46:48   作者:Lemon今天学习了吗  
这篇文章主要介绍了vue.js el-tooltip根据文字长度控制是否提示toolTip问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

一、需求

如何判断当前文本文字是否超出文本长度,是否需要出现提示toolTip。

效果图如下:

二、实现

1.表格字段鼠标放置el-popover出现 “引用主题”

的具体内容;

<!-- 表格字段:引用主题 -->
<el-table-column
  align="center"
  header-align="center"
  width="100"
  label="引用主题"
  sortable="custom"
  prop="refCnt"
  show-overflow-tooltip
>
<template slot-scope="scope">
    <span v-if="scope.row.refCnt == '0'" style="color: #f56c6c">0</span>
    <el-popover
      v-else
      placement="bottom"
      width="150"
      trigger="hover"
    >
    <ul :data="scope.row?.themeVos" class="ul-popover">
       <li v-for="(item, index) in scope.row?.themeVos" :key="index">
          <el-tooltip
            class="item"
            effect="light"
            :content="item?.themeName"
            placement="top-start"
            :disabled="!isShowTooltip"
         >
            <!-- visibilityChange:鼠标放置后是否展示省略部分;-->
            <!-- class="overflow":是否超出隐藏出现省略号; -->
            <div @mouseenter="visibilityChange($event)" class="overflow">
                {{ item?.themeName }}
            </div>
        </el-tooltip>
       </li>
     </ul>
     <span
        style="color: #1989fe; cursor: pointer"
        slot="reference"
     >
        {{ scope.row.refCnt }}
     </span>
    </el-popover>
  </template>
</el-table-column>

2.定义isShowTooltip控制是否展示提示文字tooltip

data() {
    return {
        isShowTooltip: false, // 是否显示提示文字
    }
}

3.对应的鼠标放置触发的方法实现

 // 是否提示toolTip
 visibilityChange(event) {
    const ev = event.target
    const ev_weight = ev.scrollWidth // 文本的实际宽度   scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。
    const content_weight = ev.clientWidth // 文本的可视宽度 clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。
    // const content_weight = this.$refs.tlp.$el.parentNode.clientWidth; // 文本容器宽度(父节点)
    if (ev_weight > content_weight) {
    // 实际宽度 > 可视宽度  文字溢出
        this.isShowTooltip =true
    } else {
        // 否则为不溢出
        this.isShowTooltip = false
    }
  },

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue使用qrcode生成二维码的方法

    vue使用qrcode生成二维码的方法

    这篇文章给大家介绍了vue使用qrcode生成二维码的方法,在Vue中实现二维码生成需要使用第三方库来处理生成二维码的逻辑,常用的库有qrcode和vue-qrcode,所以接下来小编将给大家介绍vue qrcode生成二维码的方法示例,需要的朋友可以参考下
    2024-01-01
  • Vue.js实现立体计算器

    Vue.js实现立体计算器

    这篇文章主要为大家详细介绍了Vue.js实现立体计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • vue中异步数据获取方式(确保数据被获取)

    vue中异步数据获取方式(确保数据被获取)

    这篇文章主要介绍了vue中异步数据获取方式(确保数据被获取),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-01-01
  • vue学习笔记之vue1.0和vue2.0的区别介绍

    vue学习笔记之vue1.0和vue2.0的区别介绍

    今天我们来说一说vue1.0和vue2.0的主要变化有哪些?对vue相关知识感兴趣的朋友一起学习吧
    2017-05-05
  • vue 输入电话号码自动按3-4-4分割功能的实现代码

    vue 输入电话号码自动按3-4-4分割功能的实现代码

    这篇文章主要介绍了vue 输入电话号码自动按3-4-4分割功能的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • vue项目同时兼容pc和移动端的解决方式

    vue项目同时兼容pc和移动端的解决方式

    我们经常在项目中会有支持pc与手机端需求,下面这篇文章主要给大家介绍了关于vue项目同时兼容pc和移动端的解决方式,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • vue使用Office Web实现线上文件预览

    vue使用Office Web实现线上文件预览

    这篇文章主要为大家介绍了vue使用微软的开发接口Office Web,实现线上文件预览,预览word,excel,pptx,pdf文件,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue2面试考点之$nextTick原理解析

    Vue2面试考点之$nextTick原理解析

    平时在获取真实DOM的时候获取不到最新的DOM元素,使用$nextTick就可以,那为什么$nextTick就可以获取到最新的DOM元素呢,本文就来带着这两个问题来解析一下nextTick的原理
    2023-05-05
  • vue2 中如何实现动态表单增删改查实例

    vue2 中如何实现动态表单增删改查实例

    本篇文章主要介绍了vue2 中如何实现动态表单增删改查实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 使用Vue写一个todoList事件备忘录经典小案例

    使用Vue写一个todoList事件备忘录经典小案例

    学习了几天Vue之后终于迎来了第一个小案例,todoList是非常常见地一个小案例,下面这篇文章主要给大家介绍了关于使用Vue写一个todoList事件备忘录经典小案例的相关资料,需要的朋友可以参考下
    2022-10-10

最新评论