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>

更多链接方式

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

探索经验总结：
如果是ng-ant-zorro表头也使用的话，需要在th加上nzEllipsis会更好，开始是元素自身的通过scrollWidth 与 offsetWidth来对比是否溢出的，但发现当出现临界点时，判断不正确。

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

最后发现只能再造个元素，一个设置overflow:hidden一个不设置，通过两个的精确宽度来对比来判断是否溢出。

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

参考：
HTML如何判定文本是否溢出（即出现省略号）？

标签：鼠标,移上去,component,width,popover,data,Angular,溢出,more
来源： https://blog.csdn.net/ann295258232/article/details/122242670