使用方法
<TextTooltip :content="contentValue"></TextTooltip>
给Tooltip再包装一下 多行的时候需要传row
<template>
<Tooltip transfer :content="content" :theme="theme" :disabled="!showTooltip" :max-width="maxWidth" :placement="placement"
class="cell-tooltip">
<span ref="content" :class="[className, row > 1 ? 'ellipsis-two-lines' : 'cell-tooltip-content']" @mouseenter="handleTooltipIn"
@mouseleave="handleTooltipOut" :style="{'-webkit-line-clamp': row}">{{ content }}</span>
</Tooltip>
</template>
<script>
export default {
name: 'TextTooltip',
props: {
content: {},
className: String,
theme: {
type: String,
default: () => {
return 'dark';
}
},
placement: {
type: String,
default: () => {
return 'bottom';
}
},
maxWidth: {
type: [String, Number],
default: () => {
return 300;
}
},
row: {
type: [String, Number],
default: () => {
return 1;
}
}
},
data() {
return {
showTooltip: false // 是否需要禁止提示
};
},
methods: {
handleTooltipIn() {
const $content = this.$refs.content;
if (this.row > 1) {
this.showTooltip = $content.scrollHeight > $content.clientHeight || $content.scrollWidth > $content.clientWidth;
} else {
this.showTooltip = $content.scrollWidth > $content.offsetWidth;
}
},
handleTooltipOut() {
this.showTooltip = false;
}
}
};
</script>
<style lang="less" scoped>
.cell-tooltip {
width: 100%;
display: flex;
align-items: center;
word-break: normal;
white-space: normal;
.cell-tooltip-content {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ellipsis-two-lines {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
}
</style>