实现溢出隐藏的内容显示el-tooltip,其余不显示el-tooltip框

最新推荐文章于 2024-10-05 01:22:45 发布

智慧小仙女

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量165

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42987138/article/details/142202792

版权

需求：

内容超出宽度，要省略号显示，并且要显示el-tooltip框，则没有超出宽度的内容，就不显示el-tooltip框

html代码：

<div class="jobLine" v-for="(jobItem, index) in jobVoList" :key="jobItem.applicationJobId" @click="linkToJob(jobItem, index)" :class="{'active': viewLogJobIndex === index}">
   <template v-if="isOverflow[index]">
      <el-tooltip popper-class="tooltips-class" effect="dark" :content="jobItem.jobName" placement="bottom"  >
        <span class="job-name" :ref="`jobName${index}Ref`">职位{{ index + 1 }}：{{ jobItem.jobName }}</span>
     </el-tooltip>
    </template>
    <template v-else>
       <span class="job-name" :ref="`jobName${index}Ref`">职位{{ index + 1 }}：{{ jobItem.jobName }}</span>
    </template>
 </div>

js代码：

data() {
    return {
      isOverflow: false, 
    }
},
mounted(){
  this.checkOverflow();  
  window.addEventListener('resize', this.checkOverflow); // 监听窗口大小变化  
},
methods: {
     // 职位文字超长显示tooltips框
   checkOverflow() { 
     this.isOverflow = this.jobVoList.map((_, index) => {  
       const element = this.$refs[`jobName${index}Ref`][0]; // 获取对应的 DOM 元素  
       if( element.scrollWidth > element.clientWidth){
         return true
       }else{
         return false
       }
    });  
}, 
beforeDestroy() {  
   window.removeEventListener('resize', this.checkOverflow); // 清理事件监听  
},