vue+antd文字超出部分省略号隐藏并提示tooltip

最新推荐文章于 2024-08-27 23:37:12 发布

Fancy Wang

最新推荐文章于 2024-08-27 23:37:12 发布

阅读量1.7k

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/wang_xinyu/article/details/126522732

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

template

<a-tooltip placement="bottom" v-if="isShowTooltip">
   <template #title>{{ v.commit }}</template>
   <p class="cardp" @mouseenter="visibilityChange($event)">{{ v.commit }}</p>
</a-tooltip>
   <p v-else class="cardp" @mouseenter="visibilityChange($event)">{{ v.commit }}</p>

export default {
    setup() {
    const isShowTooltip = ref(false);
    return {isShowTooltip};
    }
}

methods:

// 控制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;
      }
    }

css：

.cardp {
  display: block;
  height: 16px;
  margin: 7px 0px 0px 0px;
  color: #B1B2B2;
  font-size: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}