vue3项目中el-tooltip实现内容溢出时再显示,并设置tip的最大宽度
·

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


所有评论(0)