Vue文本内容超出显示省略号判断，超出显示tooltip提示

最新推荐文章于 2023-12-22 10:48:06 发布

哈哈西西）

最新推荐文章于 2023-12-22 10:48:06 发布

阅读量703

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/SugarXiXixi/article/details/131074813

版权

vue+element-ui
判断元素的容器宽度和滚动宽度的大小。来决定tooltip的启用与禁用
vue

 <div class="key-box">合同名称</div>
          <div class="value-box" ref="isOverflow"  @mouseenter="visibilityChange($event)">
            <el-tooltip class="item" effect="dark" :disabled="!tooltipFlag" :content="data.contractName" placement="top-start">
              <span  >{{data.contractName}}</span>
            </el-tooltip>
           </div>

    visibilityChange(event) {
      const ev = event.target;
      const ev_weight = ev.scrollWidth; // 文本的实际宽度
      const content_weight = this.$refs.isOverflow.clientWidth; // 文本容器宽度
      if (ev_weight > content_weight) {
        // 文本宽度 > 实际内容宽度  =》内容溢出
        this.tooltipFlag = true; 
      } else {
        // 否则为不溢出
        this.tooltipFlag = false;
      }
    },

css


.value-box{
     flex: 7;
     padding-left: 15px;
     color: #666666;
     font-size: 12px;
     border: 1px solid #EDEDF2;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     >.span{
      width: 100%;
    }
}