前几天遇到一个问题:文字过长显示tooltip,反之不展示
方法一:
文字超过12个字符剩余部分用省略号代替,展示tooltip
<el-tooltip class="item" effect="dark" content="title" placement="top" :disabled="title.length> 12">
<span>{{title.lenght>12?"title.slice(0, 12) + '...'":"title"}}</span>
</el-tooltip>
如果要做页面齐其效果,可能就有点不太美观,因为相同宽度的的盒子实际存放的数字,字母和汉字个数不同。这时可以采用如下方法:
方法二:
分为3部:1.写一个el-tooltip,里面添加两个元素div、span
2.给父元素设置样式:
(1)添加宽度,
(2)内容固定显示一行显示,
(3)超出部分用省略号代替
3.鼠标移入文字判断内容的宽度是否超出盒子的宽度,超出使用el-tooltip。
<el-tooltip
class="item"
effect="dark"
:disabled="isShowTooltip"
:content="content"
placement="top"
>
<div
class="over-flow"
@mouseover="onMouseOver('refName')"
>
<span ref="refName">{{ content }}</span>
</div>
</el-tooltip>
export default {
data() {
return {
isShowTooltip: true,
content:'内容'
};
},
methods: {
onMouseOver(str) {
let parentWidth = this.$refs[str].parentNode.offsetWidth;
let contentWidth = this.$refs[str].offsetWidth;
// 判断是否开启tooltip功能
if (contentWidth > parentWidth) {
this.isShowTooltip = false;
} else {
this.isShowTooltip = true;
}
}
}
};
.over-flow {
width: 80px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
p {
margin: 0;
}