js根据文本是否溢出，判断是否显示el-tooltip、title

最新推荐文章于 2025-03-06 14:34:16 发布

原创最新推荐文章于 2025-03-06 14:34:16 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

本文介绍了一个自定义的Tooltip组件，该组件使用Vue实现，并能够根据元素内容的宽度和高度智能判断是否显示提示信息。通过监听鼠标悬停事件，组件可以有效地解决文字溢出时的提示显示问题。

// customTooltip 组件

<template>
    <div @mouseenter="handleMouseenter" @mouseleave="mouseleave">
        <el-tooltip placement="top" :disabled="disabled" :content="props.content">
            <slot></slot>
        </el-tooltip>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
    content: {
        type: String,
        default: ''
    }
})

const disabled = ref(true)

const handleMouseenter = (e) => {
    if(!props.content) {
        return
    }
    const cellChild = e.target.children[0]
    // range 表示文档的一个区域
    const range = document.createRange()
    range.setStart(cellChild, 0)
    range.setEnd(cellChild, cellChild.childNodes.length)

    const flag = getStyle(cellChild, '-webkit-line-clamp')
    if (flag == 'none') {
        // rangeWidth 表示元素内容的宽度
        const rangeWidth = range.getBoundingClientRect().width
        let padding = (parseInt(getStyle(cellChild, 'paddingLeft')) || 0) + (parseInt(getStyle(cellChild, 'paddingRight')) || 0)

        // cellChild.offsetWidth 表示选定区域的宽度
        if (rangeWidth > cellChild.offsetWidth - padding) {
            // 显示tooltip
            disabled.value = false
        }
    } else {
        // rangeHeight 表示元素内容的高度
        const rangeHeight = range.getBoundingClientRect().height
        let padding = (parseInt(getStyle(cellChild, 'paddingTop')) || 0) + (parseInt(getStyle(cellChild, 'paddingBottom')) || 0)

        // cellChild.offsetHeight 表示选定区域的高度
        if (rangeHeight > cellChild.offsetHeight - padding) {
            // 显示tooltip
            disabled.value = false
        }
    }
}

const mouseleave = () => {
    disabled.value = true;
}

// 获取dom的样式
const getStyle = (dom, attr) => {
    return getComputedStyle(dom, null)[attr]
}   
</script>

// 使用 customTooltip 组件

<CustomTooltip :content="formData[item.key] || ''">
    <p class="text">{{ formData[item.key] || '- -' }}</p>
</CustomTooltip>