结合el-tooltip实现鼠标划上展示文字超出隐藏的全部文字

templete部分：

<div @mouseover="e => isShowTooltip(e, index)" class="name-and-count">
    <el-tooltip class="team" :content="team.name" placement="top" :disabled="isShowTip">
            <span class="team-item">{{ team.name }}</span>
    </el-tooltip>
    <div class="member">
        <span class="member-detail">
            <span class="count">{{ team.userCount }}</span>
            <span class="unit">人</span>
        </span>
        <wb-icon
            icon="line-style-delete"
            class="delete-solid"
            v-if="mouseIn === team.id"
            @click="deleteTeam($event, team.id)"
        />
    </div>
</div>

javascript部分

 textRange(el) {
    const textContent = el;
    const targetW = textContent.getBoundingClientRect().width;
    const range = document.createRange();
    range.setStart(textContent, 0);
    range.setEnd(textContent, textContent.childNodes.length);
    const rangeWidth = range.getBoundingClientRect().width;
    return rangeWidth > targetW;
    },
isShowTooltip(e) {
    const bool = this.textRange(e.target);
    this.isShowTip = !bool;
},

css部分

.card {
    width: 268px;
    height: 72px;
    margin-left: 16px;
    margin-bottom: 10px;
    background: #fbfbfd;
    background: url("../../../assets/img/addteam-cardbg.svg") no-repeat right;
    border-radius: 2px;
    border: 1px solid #e6e8f1;
    padding: 16px;
    .name-and-count {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .team {
            height: 14px;
            width: 200px;
            line-height: 14px;
            font-size: 14px;
            font-weight: 600;
            color: #2b2b33;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .member {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 18px;
            line-height: 18px;
            font-size: 18px;
            font-weight: 500;
            color: #2b2b33;
            .member-detail {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .unit {
                    font-size: 12px;
                    margin-left: 5px;
                    margin-top: 3px;
                }
            }
            .delete-solid {
                font-size: 14px;
                margin-left: 5px;
                font-weight: 600;
                color: #a1a1a9;
                &:hover {
                    color: #6777ff;
                }
            }
        }
    }
    .createTime {
        display: inline-block;
        width: 100%;
        height: 12px;
        line-height: 12px;
        font-size: 12px;
        font-weight: 400;
        color: #6b6b77;
    }
}
.card:hover {
    border-color: blue;
    cursor: pointer;
}

Range对象介绍

Range 接口表示一个包含节点与文本节点的一部分的文档片段。

可以用 Document 对象的 Document.createRange 方法创建 Range，也可以用 Selection 对象的 getRangeAt 方法获取 Range。另外，还可以通过 Document 对象的构造函数 Range() 来得到 Range。

developer.mozilla.org/zh-CN/docs/…