vue判断文字是否溢出,溢出显示el-tooltip


     {{ data.name }}    

export default{
 data(){
   return{
     isShowTooltip:false,
   }     
 },
 
 methods: {
    visibilityChange(event) {
      const ev = event.target;
      const ev_weight = ev.scrollWidth; // 文本的实际宽度   scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。
      const content_weight = ev.clientWidth;// 文本的可视宽度 clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。
      // const content_weight = this.$refs.tlp.$el.parentNode.clientWidth; // 文本容器宽度(父节点)
      if (ev_weight > content_weight) {
        // 实际宽度 > 可视宽度  文字溢出
        this.isShowTooltip = true;
      } else {
        // 否则为不溢出
        this.isShowTooltip = false;
      }
    },
  }
}
.group-name {
   flex: 1;
   display: block;
   overflow: hidden;
   max-width: 60%;
   text-overflow:ellipsis; 
   white-space: nowrap;
}

你可能感兴趣的:(前端,vue.js,elementui,javascript)