el-tooltip根据内容宽度是否显示

阅读目录

• 一、问题引入
• 二、代码实现

一、问题引入

使用 el-tooltip 时需要根据内容宽度来决定是否显示鼠标移入效果，内容超出省略号（即内容太多）时显示鼠标移入效果

二、代码实现

1、页面元素绑定鼠标事件

<div v-for="(v,i) in configs.filter(v=>v.name==='znkfRecommendedProblem')" :key="i" class="normalquestion" @click="debounceSend(v.value)">
    <img src="../../assets/service/talk.png" alt="">
    <el-tooltip :disabled="isShowTooltip" class="item" effect="dark" popper-class="service_popper" :content="v.value" placement="bottom-end">
        <div @mouseover="onMouseOver(v.value+i)" class="desc">
            <span :ref="v.value+i">{{v.value}}</span>
        </div>
    </el-tooltip>
</div>    

2、动态获取内容宽度觉得是否显示鼠标效果

        onMouseOver(str) {
            try {
                const tag = this.$refs[str][0]
                const parentWidth = tag.parentNode.offsetWidth // 获取元素父级可视宽度
                const contentWidth = tag.offsetWidth // 获取元素可视宽度
                this.isShowTooltip = contentWidth <= parentWidth
            } catch (error) {

            }
        },

超出省略号

            .desc {
                flex: 1;
                font-family: SourceHanSansCN-Regular;
                font-size: 14px;
                color: #333333;
                font-weight: 400;
                margin-left: 10px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                cursor: pointer;
                &:hover {
                    color: #ff9f0a;
                    text-decoration: underline;
                    text-underline-offset: 3px;
                }
            }