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

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

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

<script setup>
import { ref, defineProps } from 'vue';
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) => {
    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>