判断文本是否溢出, 溢出则使用el-tooltip

最新推荐文章于 2024-10-02 05:39:15 发布

空白_A

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量90

点赞数 2

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_56933704/article/details/142106861

版权

当在使用溢出隐藏和el-tooltip时候，需要判断有溢出才会提示不溢出不提示

<template>
    <div class="cell-wrapper" v-if="isTextOverflow(row.headCountName)">
         <el-tooltip class="item" effect="dark" :content="row.headCountName" placement="top">
            <span class="headcount-over">{{ row.headCountName }}</span>
         </el-tooltip>
    </div>
    <div v-else> <span class="headcount-over">{{ row.headCountName }}</span></div>
</template>


export default {
  data() {
    return {}
  },
  methods: {
    // 修改省略提示
    isTextOverflow(text) {
      const span = document.createElement('span');
      span.textContent = text;
      span.style.visibility = 'hidden';
      span.style.position = 'absolute';
      span.style.whiteSpace = 'nowrap';
      document.body.appendChild(span);
      const isOverflow = span.offsetWidth > 140; // 这里的宽度为文本父级的width（内容外层）
      document.body.removeChild(span);
      return isOverflow;
    },
  }
}