element用于超出tooltip隐藏

<template>
    <div class="jc-overflow-tooltip">
        <el-tooltip
            class="item"
            effect="dark"
            :visible="visible"
            :disabled="isShowTooltip"
            :content="props.content"
            :placement="props.placement"
        >
            <p class="over-flow jc-ellipsis" :style="{ maxWidth: props.width }" @mouseleave="handleMouseLeave" @mouseover="onMouseOver">
                <span ref="tooltip">{{ props.content }}</span>
            </p>
        </el-tooltip>
    </div>
</template>

<script setup lang="ts">
/**
 * 方法说明 : 用于超出tooltip隐藏
 * @author : JC0871 2023/07/10 10:40:58
 * @params : width  所占宽度大小
 * @params : content  所展示的内容
 * @params : width  所占宽度大小
 * @example: <jc-overflow-tooltip  :width="pxToRem(120)" :content="content" :placement="`top`"></jc-overflow-tooltip>
 * @example: <jc-overflow-tooltip :width="`80%`" :content="content" :placement="`top`"></jc-overflow-tooltip>
 * @example: <jc-overflow-tooltip :width="`calc(100% - 50px)`" :content="content" :placement="`top`"></jc-overflow-tooltip>
 *
 */
import { ref } from 'vue'
import { pxToRem } from '../../utils/rem'
// const props = defineProps(['content', 'width'])
const props = defineProps({
    content: {
        type: String,
        default: ''
    },
    width: {
        type: String,
        default: ''
    },
    placement: {
        type: String,
        default: 'top'
    }
})
const isShowTooltip = ref(false)
const tooltip = ref()
const visible = ref(false)
// 进入字体范围
const onMouseOver = (str) => {
    const parentWidth = tooltip.value.parentNode.offsetWidth
    const contentWidth = tooltip.value.offsetWidth
    // console.log('parentWidth', parentWidth)
    // console.log('contentWidth', contentWidth)
    visible.value = true
    // 判断是否开启tooltip功能
    if (contentWidth > parentWidth) {
        isShowTooltip.value = false
    } else {
        isShowTooltip.value = true
    }
}
// 离开字体范围
const handleMouseLeave = () => {
    // 直接隐藏tip
    visible.value = false
}
</script>

<style scoped lang="scss">
.jc-tooltip-ellipsis {

.jc-ellipsis{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

}
</style>

ps: 代码纯属记录工作中遇到的问题或者组件