You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
30 lines
980 B
30 lines
980 B
import { AfterContentInit, AfterViewInit, ChangeDetectorRef, Directive, ElementRef, Input } from "@angular/core";
|
|
import { NzPopoverDirective } from "ng-zorro-antd/popover";
|
|
|
|
@Directive({
|
|
selector: "[jwTdOverflow]",
|
|
})
|
|
export class TdOverflowDirective implements AfterViewInit {
|
|
@Input("jwTdOverflow") content!: string;
|
|
|
|
constructor(
|
|
private elementRef: ElementRef,
|
|
private popoverDirective: NzPopoverDirective,
|
|
private cdr: ChangeDetectorRef
|
|
) {}
|
|
|
|
ngOnInit() {}
|
|
|
|
ngAfterViewInit(): void {
|
|
const element = this.elementRef.nativeElement as HTMLElement;
|
|
console.log("element", element.offsetWidth, element.scrollWidth);
|
|
// 如果元素的实际宽度大于可见宽度，就使用 nz-popover 指令来显示完整的内容
|
|
if (element.offsetWidth < element.scrollWidth) {
|
|
this.popoverDirective.content = this.content;
|
|
} else {
|
|
this.popoverDirective.trigger = null;
|
|
this.popoverDirective.content = "da";
|
|
element.textContent = this.content;
|
|
}
|
|
}
|
|
}
|
|
|