场景：日常我们当内容过长时，会使用css+el-tooltip组件实现截断文本内容，在鼠标 hover 时展示完整文本信息..
问题：使用el-tooltip后，无论这个文本内容是否超出指定行数或者是否截断，都会在hover时显示tooltip, 这不是我们想要的效果。我们想实现类似于el-table里添加 show-overflow-tooltip时的效果，只有内容进行缩略了，才会展示tooltip
思路： 在鼠标悬浮的时候判断节点高度或者宽度是否超出，如果超出toolTip就显示，否则为disable
主要逻辑：
function onMouseEnter(e) {
//获取元素
const dom = e.target;
//根据内容判断是否展示tooltip
showTooltip.value = !(
dom.offsetWidth < dom.scrollWidth || dom.offsetHeight < dom.scrollHeight
);
}
主要功能实现了，就可以愉快的封装组件了～
/**
* desc: 文本超出显示省略号，并且显示tooltip
* feat：支持自定义多行显示省略
* usage：
* 1、<myToolTip>显示文本</myToolTip>
* 2、<myToolTip text="显示文本"></myToolTip>
* 3、<myToolTip content="显示文本">显示文本</myToolTip>
* 4、<myToolTip :lineNumber="3">显示文本</myToolTip>
*/
<template>
<el-tooltip
popper-class="popper"
v-bind="$attrs"
:disabled="showTooltip"
:placement="placement"
:show-arrow="false"
>
<template #content>
<span v-if="content || text">{{ content || text }}</span>
<span v-else><slot></slot></span>
</template>
<div
class="text-ellipsis-multiple"
:style="styleObj"
@mouseenter.stop="onMouseEnter"
:id="!showTooltip ? 'text' : ''"
>
<slot>{{ text }}</slot>
</div>
</el-tooltip>
</template>
<script setup>
import { ref, defineProps, computed } from "vue";
const props = defineProps({
text: String,
placement: {
type: String,
default: "top",
},
content: String,
//默认超出一行省略
lineNumber: {
type: Number,
default: 1,
},
});
let styleObj = computed(() => {
return { "-webkit-line-clamp": props.lineNumber };
});
let showTooltip = ref(true);
function onMouseEnter(e) {
const dom = e.target;
showTooltip.value = !(
dom.offsetWidth < dom.scrollWidth || dom.offsetHeight < dom.scrollHeight
);
}
</script>
<style lang="less" scoped>
.text-ellipsis-multiple {
font-size: 12px;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
#text:hover {
cursor: pointer;
}
</style>
这样就实现了自定义行数显示是否展示tooltip~
完结撒花🎉..
