主要利用el-tooltip中的disabled
效果图:
内容没有超出不显示提示框
内容超出,显示提示框
具体代码:
<template>
<div>
<el-tooltip effect="dark" :disabled="isShowTooltip" :content="item.remark" placement="top-start" popper-class="tooltip-width">
<div class="remark" @mouseover="onMouseOver()">
<span ref="remark">{{ item.remark }}</span>
</div>
</el-tooltip>
</div>
</template>
<script>
export default {
data() {
return {
isShowTooltip: false
}
},
methods: {
onMouseOver() {
const parentWidth = this.$refs.remark.parentNode.offsetWidth // 获取元素父级可视宽度
const contentWidth = this.$refs.remark.offsetWidth // 获取元素可视宽度
this.isShowTooltip = contentWidth <= parentWidth
}
}
}
</script>
<style scope>
.remark {
width:100px;
height: 50px;
line-height: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>