判断文字是否溢出，溢出显示tooltip
前言
同样适用于
el-popover,el-tooltip,title, 根据文字是否溢出，来控制tooltip显示
一、封装自定义 tooltip 组件
代码如下（示例）：
// customTooltip 组件
<template>
<el-popover
:disabled="!isShowTooltip"
:content="props.content"
tigger="hover" width="200"
popper-class="popover"
>
<span slot="reference" @mouseenter.self="handleMouseenter" >
{
{
props.content}}
</span>
</el-popover>
</template>
- vue3 写法
// vue3 写法
<script setup lang="ts" name='customTooltip'>
import {
ref，defineProps } from 'vue';
const props = defineProps({
content: {
type: String,
default: ''
}
})
const isShowTooltip = ref(false);
const handleMouseenter = (e) => {
const target = e.target;
const target_weight = target.scrollHeight;
const target_content_weight = target.clientHeight;
isShowTooltip.value = target_weight > target_content_weight;
}
const mouseleave = () => {
isShowTooltip.value = false;
}
</script>
- vue2 写法
// vue2 写法
<script >
export default {
name: "customTooltip",
props: {
content: {
type: String,
default: ''
}
},
data() {
return {
isShowTooltip: false,
};
},
methods: {
handleMouseenter(e) {
const target = e.target;
const target_weight = target.scrollHeight;
const target_content_weight = target.clientHeight;
this.isShowTooltip = target_weight > target_content_weight;
}
},
};
</script>
- 样式
<style lang="scss">
.popover {
padding: 12px !important;
max-height: 150px;
overflow-y: auto;
&::-webkit-scrollbar {
width: 0;
display: none
}
}
</style>
二、使用自定义 tooltip 组件
代码如下（示例）：
// 使用 customTooltip 组件
<CustomTooltip content="使用 customTooltip 组件"></CustomTooltip>