<template>
<el-form-item :label="label">
<el-tooltip
:content="tvalue"
placement="top"
effect="light"
:disabled="!isShowTooltip"
>
<div
@mouseenter="visibilityChange($event)"
style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
>
{{tvalue}}
</div>
</el-tooltip>
</el-form-item>
</template>
<script>
export default{
name:"FormItemTooltip",
props:{
tvalue:{
default:'',
type: [String,Number]
},
label:{
default:'',
type:[String,Number]
}
},
data(){
return{
isShowTooltip:false,
}
},
methods:{
visibilityChange(event) {
// console.log(event)
const ev = event.target;
const ev_weight = ev.scrollWidth; // 文本的实际宽度 scrollWidth：对象的实际内容的宽度，
const content_weight = ev.clientWidth;// 文本的可视宽度 clientWidth：对象内容的可视区的宽度
if (ev_weight > content_weight) {
// 实际宽度 > 可视宽度 文字溢出
this.isShowTooltip = true;
} else {
// 否则为不溢出
this.isShowTooltip = false;
}
}
}
}
</script>
<style>
.el-tooltip__popper {
max-width: 400px;
line-height: 180%;
}
</style>