前言

需求:要求单行显示文字溢出部分需要显示省略号,但鼠标悬浮需要显示 tooltip 完整信息
关键点:文字溢出显示省略号就不说了,主要是如何判断什么时候需要显示 tooltip什么时候不显示。
思路:如果文字省略时,子元素宽度势必小于父元素宽度,则可通过监听鼠标移入事件判断父子元素宽度知道文字是否溢出,从而动态控制 tooltip 的显示。

<template>
    <el-tooltip
        :disabled="isShowTooltip"
        :content="text"
        placement="top"
        effect="light"
    &gt;
        <div
            class="ellipsis"
            @mouseover="onMouseOver(refName)"
        &gt;
            <span :ref="refName"&gt;{{ text }}</span&gt;
        </div>
    </el-tooltip>
</template>

<script>
    export default {
        data() {
            return {
                isShowTooltip: true,
            }
        },
        props: {
            text: {
                type: String,
                required: true
            },
            refName: {
                type: String,
                required: true
            }
        },
        methods: {
            onMouseOver(refName) {
                const parentWidth = this.$refs[refName].parentNode.offsetWidth;
                const contentWidth = this.$refs[refName].offsetWidth;
                // 判断是否开启 tooltip 功能,如果溢出显示省略号,则子元素宽度势必短于父元素宽度
                if (contentWidth > parentWidth) {
                    this.isShowTooltip = false;
                } else {
                    this.isShowTooltip = true;
                }
            }
        }
    };
</script>

<style lang="less" scoped>
    .ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>

原文地址:https://blog.csdn.net/m0_46627730/article/details/129278164

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_30494.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注