文本溢出时显示省略号“...”。并且在hover时显示气泡tooltip展示完整内容。
优点：tooltip气泡只在已经溢出的文本上显示，不溢出时不显示气泡。
<template>
<el-tooltip class="item" effect="dark" :content="$slots.default[0].text" placement="top-start" :disabled="!show">
<span ref="text" class="hidden-text" :style="{ width: width }">
{{ $slots.default[0].text }}
</span>
</el-tooltip>
</template>
<script>
export default {
name: 'HiddenSpan',
props: {
width: {
type: String,
required: true
}
},
data() {
return {
show: false
}
},
mounted() {
this.$nextTick(() => {
this.calc()
})
},
methods: {
calc() {
const text = this.$refs.text
this.show = (text.scrollWidth > text.clientWidth)
}
}
}
</script>
<style scoped>
.hidden-text {
overflow: hidden;
text-overflow: ellipsis;
display: block;
white-space: nowrap;
}
</style>
