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

最新推荐文章于 2024-07-22 01:07:19 发布

Lccccb

最新推荐文章于 2024-07-22 01:07:19 发布

阅读量1.1k

点赞数 4

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/Lccccb/article/details/128221796

版权

// 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>