vue、element-ui使用el-tooltip判断文本是否溢出-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue、element-ui使用el-tooltip判断文本是否溢出。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.需求：需要实现文本单行显示，超出时，使用省略号，划过该文本时使用tooltip显示全部文本。需要考虑数据是由接口动态获取，只有溢出文本鼠标滑过时显示全部文本，没有溢出的则不需要。

2.实现：

第一步：首先要判断文本是否溢出

这里网上可以找到很多方法，我是用scrollWidth去拿到实际文本长度，跟clientWidth文本可视宽度作比较。需要注意的是我遇到了一个问题，即

判断文本溢出之前一定要使用单行文件溢出显示省略号的css，并且要加在tooltip内部要溢出隐藏的span上，不然scrollWidth和clientWidth会一直为0

 onMouseOver(event) {
      const ev = event.target;
      const evWeight = ev.scrollWidth;
      const contentWidth = ev.clientWidth;
      if (evWeight > contentWidth) {
        this.isShowTooltip = false;
      } else {
        this.isShowTooltip = true;
      }
    },

    <el-row v-for="(row, rowIndex) in djnumberOfRows" :key="rowIndex">
              <el-col
                v-for="(column, colIndex) in row.length"
                :key="colIndex"
                :span="
                  calculateSpan(row, rowIndex, djnumberOfRows.length, colIndex)
                "
              >
                <template v-if="row[colIndex]">
                  <el-form-item class="radioClass" :label="row[colIndex].name">
                    <el-tooltip
                      :content="djForm ? djForm[row[colIndex].fieldskey] : ''"
                      :disabled="isShowTooltip"
                      placement="top"
                    >
                      <div
                        @mouseover="onMouseOver($event)"
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        "
                      >
                        {{ djForm ? djForm[row[colIndex].fieldskey] : '' }}   //之前我在这里包了一层span，是错误的，会导致拿到的不准，有的是0，有的地方不是，因为span有范围。为什么会在这加一层span，用div，因为省略号
                      </div>
                    </el-tooltip>
                  </el-form-item>
                </template>
              </el-col>
            </el-row>

补充：（未试）文章来源地址https://www.toymoban.com/news/detail-810411.html

methods: {
  onMouseOver (str) { // 内容超出，显示文字提示内容
      const tag = this.$refs[str]
      const parentWidth = tag.parentNode.offsetWidth // 获取元素父级可视宽度
      const contentWidth = tag.offsetWidth // 获取元素可视宽度
      this.isShowTooltip = contentWidth <= parentWidth

  }
}

到了这里，关于vue、element-ui使用el-tooltip判断文本是否溢出的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！