el-tooltip动态根据内容是否超出隐藏来显示

开发那点事儿~

已于 2023-03-14 16:53:16 修改

阅读量541

点赞数 1

分类专栏：前端开发 javascript 文章标签： javascript vue.js Powered by 金山文档

于 2023-03-14 16:52:08 首次发布

本文链接：https://blog.csdn.net/m0_58293192/article/details/129532366

版权

前端开发同时被 2 个专栏收录

90 篇文章 7 订阅

订阅专栏

javascript

31 篇文章 0 订阅

订阅专栏

<div class="sure-btn">
    <div v-for="(item,index) in noticeUserIdArrayFront" :key="index">
        <!-通过disabled属性来控制 el-tooltip 的显示->
        <el-tooltip v-if="item.orgName" class="item" effect="dark" :content="item.orgName" :disabled="isShowTooltip" placement="top">
            <div class="sure-text" @mouseover="onMouseOver(index)">
                <span class="sure-text2">{{item.orgName}}</span>
            </div>
        </el-tooltip>
    </div>
</div>

<script>
    export default {
        data() {
            return {
                noticeUserIdArrayFront: [],
                isShowTooltip: true
            }
        },
        methods: {
            onMouseOver(index) {
                let contentWidth = 0;
                let parentWidth = 0;
                this.$nextTick(() => {
                    // querySelectorAll 返回的是一个数组
                    // querySelector 返回的是一个对象
                    // 因为我们上面是循环的，所以contentWidth获取的是一个数组,我们要根据索引获取对应内容的宽度
                    contentWidth = document.querySelectorAll('.sure-text2')[index].offsetWidth // 内容宽度
                    // 这里父级宽度是固定的,就不用循环了(也是可以循环的)
                    parentWidth = document.querySelector('.sure-text').offsetWidth // 父级宽度
                    if (contentWidth > parentWidth) {
                        this.isShowTooltip = false
                    } else {
                        this.isShowTooltip = true
                    }
                })
            }

.sure-text {
        width: 210px; // 固定的宽度
        padding: 6px;
        background-color: #e6e6e6;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        margin: 6px;
    }