在使用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一个不设置,通过两个的精确宽度来对比来判断是否溢出。
先记录一下解决方案,后期还可以继续优化。