html代码

<el-tooltip :disabled="!textIsOverflow" placement="top">
    <template #content>
      <div class="tooltip-div">
        tootip的内容
      </div>
    </template>
    <div class="textOverflow" ref="textRef">触发的内容,这里要处理成溢出采用省略号效果,配合tooltip食用,完美</div>
  </el-tooltip>

js代码

const textRef = ref();
const textIsOverflow = ref(false);
// 判断内容是否超出div的宽度
const checkIsOverflow = () => {
  if (textRef.value) {
    const clientW = textRef.value.clientWidth;
    const scrollW = textRef.value.scrollWidth;
    textIsOverflow.value = scrollW > clientW;
  }
};
onMounted(() => {

  // nextTick(() => {
    checkIsOverflow();// 这行代码放在tip使用的数据返回的地方,获取不到dom元素的话配合nextTick使用。或者放在onMounted里。
  // })
})

css代码

.tooltip-div {
  max-width: 200px;
}

.textOverflow {
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: default;
}

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐