子组件
<template>
<el-tooltip class="tooltip" :disabled="isShowTooltip" :content="text" placement="bottom" effect="light">
<div class="container" @mouseover="onMouseOver(refName)">
<span class="ellipsis" :ref="refName">{{ text }}</span>
</div>
</el-tooltip>
</template>
<script>
export default {
data() {
return {
isShowTooltip: true,
}
},
props: {
text: {
type: String,
required: true,
},
refName: {
type: String,
required: true,
},
},
methods: {
onMouseOver(refName) {
console.log(refName, this.$refs[refName].parentNode, this.$refs[refName])
const parentWidth = this.$refs[refName].parentNode.offsetWidth
const contentWidth = this.$refs[refName].offsetWidth
// 判断是否开启 tooltip 功能,如果溢出显示省略号,则子元素的宽度势必短于父元素的宽度
console.log(parentWidth, contentWidth)
if (contentWidth == parentWidth) {
this.isShowTooltip = false
} else {
this.isShowTooltip = true
}
},
},
}
</script>
<style lang="scss" scoped>
/* 显示的行数:一行 */
.ellipsis {
display: inline-block;
max-width: 100%; /* 定宽 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* 显示的行数:两行 */
// display: -webkit-box;
// -webkit-box-orient: vertical;
// -webkit-line-clamp: 2; /* 显示的行数 */
// overflow: hidden;
// text-overflow: ellipsis;
}
.container {
display: flex;
flex-wrap: nowrap;
max-width: 100%; /* 定宽 */
overflow: hidden;
}
</style>
父组件引用
<toopitnormal ref="reftoopit2" :text="item2.pointName" :refName="refName2"></toopitnormal>