共计 929 个字符，预计需要花费 3 分钟才能阅读完成。
文字超出宽度，省略号展现，hover 文字，用 el-tooltip 展现全副。
文字未超出，el-tooltip 不展现。
留神 disabled 属性。
<template>
<el-tooltip
:effect="dark"
:content="text"
:disabled="disableTip"
:placement="placement"
>
<div class="ellipsis"
:class="className"
@mouseover="onMouseOver">
<span ref="ellipsis">{{text}}</span>
</div>
</el-tooltip>
</template>
<script>
export default {
name: 'EllipsisTooltip',
props: {text: { type: String, default: ''},
placement: {type: String, default: 'top-start'},
effect: {type: String, default: 'dark'},
className: {type: String, default: ''},
},
data() {
return {disableTip: false,}
},
methods: {onMouseOver() {let parentWidth = this.$refs['ellipsis'].parentNode.offsetWidth
let contentWidth = this.$refs['ellipsis'].offsetWidth
this.disableTip = contentWidth <= parentWidth
},
},
}
</script>
<style scoped lang="scss">
.ellipsis {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
应用：
<ellipsis-tooltip
:text="测试 test 测试 test 测试 test 测试 test 测试 test 测试 test"
:placement="'left'"
>
</ellipsis-tooltip>正文完