使用場景：文本溢出時需要對文本進行處理；相對于一定高度的容器，溢出容器部分的文本顯示省略號，同時，鼠標移入通過顯示tooltip來顯示文本的具體內容
組件的二次封裝
<template>
<!-- :disabled="disabledTip" -->
<el-tooltip
ref="tlp"
:content="text"
effect="dark"
:disabled="!tooltipFlag"
:placement="placement"
class="tooltip"
>
<span :class="className" @mouseenter="visibilityChange($event)">{{ text }}</span>
</el-tooltip>
</template>
<script>
export default {
name: 'EllipsisTooltip',
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_height = ev.offsetHeight // 文本的實際高度
const content_height = this.$refs.tlp.$el.parentNode.clientHeight // 文本容器高度
console.log('content_height', content_height, 'ev_height', ev_height)
console.log(content_height > ev_height)
if (content_height < ev_height) {
// 實際內容高度 > 文本高度 =》內容溢出
this.tooltipFlag = true // NameIsIncludeWord ? true : !!false
} else {
// 否則為不溢出
this.tooltipFlag = false
}
console.log('flag:', this.tooltipFlag)
}
}
}
</script>
組件的使用
// html
<div class="tooltip-wrap">
<ellipsis-tooltip
:text="templateDetail.type"
></ellipsis-tooltip>
</div>
// css
.tooltip-wrap {
width: 200px;
height: 40px; // 必須要有高度設置，因為tooltip的顯示條件是通過高度來判斷的
display: inline-block;
display: -webkit-box;
-webkit-line-clamp: 1; // 因為通過高度所以只顯示一行，溢出顯示省略號
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
