element-plus中的tooltip组件实现文字溢出显示省略号，悬浮显示tooltip完整信息

互联网 12 月前 0 4

本文介绍: tooltip 文字溢出显示省略号，精准控制文字溢出的 tooltip 显示

前言

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

&lt;template&gt;
    <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>