<template>
<div class="tooltip-wrap">
<el-tooltip
ref="tlp"
:content="text"
effect="dark"
:disabled="!tooltipFlag"
:placement="placement"
>
<p class="over-flow" @mouseenter="visibilityChange($event)">{{ text }}</p>
</el-tooltip>
</div>
</template>
<script>
export default {
name: "Tooltip",
props: {
text: { type: String, default: "" }, // 字符内容
placement: { type: String, default: "top-start" },
className: { type: String, default: "text" }, // class
},
data() {
return {
disabledTip: false,
tooltipFlag: false,
};
},
methods: {
// tooltip的可控
visibilityChange(event) {
const ev = event.target;
const ev_weight = ev.scrollWidth; // 文本的实际宽度
const content_weight = this.$refs.tlp.$el.parentNode.clientWidth; // 文本容器宽度(父节点)
if (ev_weight > content_weight) {
// 文本宽度 > 实际内容宽度 -->内容溢出,则显示悬浮
this.tooltipFlag = true;
} else {
// 否则为未溢出,不显示悬浮
this.tooltipFlag = false;
}
},
},
};
</script>
<style lang="scss">
.tooltip-wrap {
height: 26; // 必须要有高度设置(高度可根据实际情况调整),因为tooltip的显示条件是通过高度来判断的
}
.over-flow {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all; //英文数字折行
}
p {
width: 100%;
margin: 0;
}
</style>
vue文件中引用
import Tooltip from "@/components/Tooltip"
<div id="el_col_behind_newLong" style="width:90%">
<Tooltip :text='`${item.ip + `【${item.country}-${item.province}-${item.city}】`}`' />
</div>
参考:网络文件。