vue3+element-plus内容过多时使用省略号显示，鼠标移入时 tooltip显示所有内容

vue3+element-plus内容过多时使用省略号显示，鼠标移入时 tooltip显示所有内容
超过三行用省略号显示，鼠标移入显示内容
封装成组件

<template>
    <el-tooltip effect="light" :disabled="isShowTooltip" :content="content" placement="top" :visible="visible">
        <div :ref="setItemRef" class="margin10 tooltip"
            :style="isShowTooltip == false?'cursor: pointer;':''" 
            @mouseover="onMouseOver(refName)"
            @mouseleave="visible = false" 
            popper-class="table-tooltip"
        >{{ content }}</div>
    </el-tooltip>
</template>

<script setup>
import { ref, defineProps } from 'vue';
// 当鼠标离开当前内容位置时，立即隐藏弹出层内容
const visible = ref(false)
const props = defineProps({
// 显示的文字内容
content: {
    type: String,
    default: '',
},
// 外层框的样式，在传入的这个类名中设置文字显示的宽度
className: {
    type: String,
    default: 'w100',
},
// 为页面文字标识（如在同一页面中调用多次组件，此参数不可重复）
refName: {
    type: String,
    default: '',
},
});

const iframeRefs = ref({});
const setItemRef = (el, key) => {
    if (el) {
        iframeRefs.value[props.refName] = el;
    }
};
const isShowTooltip = ref(true);
const onMouseOver = (str) => {
    visible.value = true
    let parentWidth = iframeRefs.value[str].parentNode.offsetHeight;
    let contentWidth = iframeRefs.value[str].scrollHeight;
    // 判断是否开启tooltip功能
    if (contentWidth > parentWidth) {
        isShowTooltip.value = false;
    } else {
        isShowTooltip.value = true;
    }
};
</script>
  
<style scoped>
.tooltip {
    display: -webkit-box;
    display:-moz-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-line-clamp: 3; 
    overflow: hidden; 
    text-overflow: ellipsis;  
    word-break: break-all; 
}
.table-tooltip {
    transition: transform 0.3s var(--el-transition-function-fast-bezier);
}
</style>

使用方式：

// 在页面上进行调用
<div class="wh100" style="white-space: pre-wrap;">
  <Tooltip :content="scope.row[field.columnName]"></Tooltip>
</div>

//引入组件
import Tooltip from '@/components/Tooltip.vue'