Angular | 文本溢出鼠标移上去时显示全部的气泡卡片组件

在使用ng-zorro-antd的table时,发现并没有自带element那种单元格文本溢出显示,element的table设置这个show-overflow-tooltip就能轻松使用。

1.新建一个组件more-popover
more-popover
│ more-popover.component.css
│ more-popover.component.html
│ more-popover.component.spec.ts
│ more-popover.component.ts

2.more-popover.component.html模板中

<div class="content-container">
  <ng-template #contentTemplate>
    <div class="popover-container">
      <span>{{data}}</span>
    </div>
  </ng-template>

  <ng-template [ngIf]="showMore" [ngIfElse]="simpleShow">
    <span #myBox class="data-box">{{data}}</span>
    <span #clone class="data-box clone">{{data}}</span>
    <span *ngIf="isOverflow" class="more-text" nz-button nz-popover [nzPopoverContent]="contentTemplate" nzPopoverTrigger="click">更多</span>
  </ng-template>

  <ng-template #simpleShow>
    <span #myBox class="data-box full" nz-popover [nzPopoverContent]="contentTemplate" [nzPopoverTrigger]="isOverflow?'hover':null">{{data}}</span>
    <span #clone class="data-box full clone">{{data}}</span>
  </ng-template>
</div>


3.more-popover.component.css中

.content-container {
    width: 100%;
    display: flex;
}

.data-box {
    display: block;    
    width: calc(100% - 30px);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.data-box.clone.full,.data-box.clone {
    overflow: auto;
    position:absolute;
    bottom: -50px;
    width: auto;
    opacity: 0;
}

.data-box.full {
    width: 100%;
}

.more-text {
    color:rgb(64, 158, 255);
    cursor:pointer;
}

.popover-container {
    max-width: 600px;
    word-break: break-all;
}

3.more-popover.component.ts中


import { Component, Input, OnInit, ChangeDetectorRef } from '@angular/core';
import { ViewChild } from '@angular/core';

@Component({
  selector: 'app-more-popover',
  templateUrl: './more-popover.component.html',
  styleUrls: ['./more-popover.component.css']
})
export class MorePopoverComponent implements OnInit {
  @Input() data: any;//接收父组件的值
  @Input() showMore: boolean = false; //是否显示‘更多’链接

  constructor(private cd: ChangeDetectorRef) { }

  isOverflow:boolean = false;
  @ViewChild("myBox") myBox: any
  @ViewChild("clone") clone: any

  ngAfterViewChecked() {
    // 内容宽度 大于 容器宽度 溢出
    if(this.clone.nativeElement.getBoundingClientRect().width > this.myBox.nativeElement.getBoundingClientRect().width){
        this.isOverflow  = true;
      }else{
        this.isOverflow = false;
    }
    this.cd.detectChanges();

  }

  ngAfterViewInit() {
    // 内容宽度 大于 容器宽度 溢出
    if(this.clone.nativeElement.getBoundingClientRect().width > this.myBox.nativeElement.getBoundingClientRect().width){
        this.isOverflow  = true;
      }else{
        this.isOverflow = false;
    }
    this.cd.detectChanges();    
    
  } 
  
  ngOnInit(){
  }

}

4.使用
简单方式

<app-more-popover [data]='item[headSetItem.columnName]'></app-more-popover>

Angular | 文本溢出鼠标移上去时显示全部的气泡卡片组件

更多链接方式

<app-more-popover  [data]='item.appliedVehicles' [showMore]='true'></app-more-popover>

Angular | 文本溢出鼠标移上去时显示全部的气泡卡片组件
探索经验总结:
如果是ng-ant-zorro表头也使用的话,需要在th加上nzEllipsis会更好,开始是元素自身的通过scrollWidth 与 offsetWidth来对比是否溢出的,但发现当出现临界点时,判断不正确。

判断溢出如果用 scrollWidth > offsetWidth 会发现临界值的时候存在问题,因为这2个属性获取的是整数,但是实际上宽度可能不为整数,浏览器的溢出处理用得是准确宽度的值,就会出现已经有省略号了,但还没法判断是否溢出,因为 scrollWidth == offsetWidth ,但却不等于实际的宽度,这是鼠标移上去气泡卡片出不来

Angular | 文本溢出鼠标移上去时显示全部的气泡卡片组件
最后发现只能再造个元素,一个设置overflow:hidden一个不设置,通过两个的精确宽度来对比来判断是否溢出。

先记录一下解决方案,后期还可以继续优化。

参考:
HTML如何判定文本是否溢出(即出现省略号)?

上一篇:Angular—开发人员的首选


下一篇:JS中字符串拼接