vue判断文字是否溢出，溢出显示el-tooltip

最新推荐文章于 2025-01-07 17:02:55 发布

～Serendipity～

最新推荐文章于 2025-01-07 17:02:55 发布

阅读量6.3k

点赞数 13

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/ZMJ_QQ/article/details/121119485

scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。
clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。
offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。


<el-tooltip :content="item.name" placement="bottom" effect="light" :disabled="!isShowTooltip">
    <span class="member-label member-span text-hidden" v-if="edited" 
     @mouseenter="visibilityChange($event)">{{ item.name }}</span>
</el-tooltip>

export default{
 data(){
   return{
     isShowTooltip:false,
   }     
 },

 methods: {
    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;
      }
    },
  }
}

.text-hidden{
  overflow: hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
}