base-resize.component.ts 1.09 KB
Newer Older
liujiaxin's avatar
1  
liujiaxin committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
import {AfterViewInit, HostListener} from '@angular/core';

export class BaseResizeComponent implements AfterViewInit {
  resizeTimer: any;

  constructor() {
  }

  ngAfterViewInit() {
    this.autoSizeText();
  }

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    clearTimeout(this.resizeTimer);
    this.resizeTimer = setTimeout(() => {
      this.autoSizeText();
    }, 500);
  }

  resizeText(el: any, fontSize: number = 10) {
    fontSize++; // el.computedStyleMap().get('font-size');
    // Ken 2018-08-09 14:39 无文字时, 不需要计算字号
    if (el.textContent.length === 0) {
      return;
    }
    el.style.fontSize = (fontSize + 2) + 'px';
    if (el.scrollHeight > el.parentElement.offsetHeight) {
      el.style.fontSize = fontSize + 'px';
    } else {
      setTimeout(() => {
          this.resizeText(el, fontSize);
      }, 32);

    }
  }

  autoSizeText() {
    const elements: NodeListOf<HTMLElement> = document.querySelectorAll('.fit-font-size');
    for (let i = 0; i < elements.length; i++) {
      const el = elements.item(i);
      this.resizeText(el);
    }
  }
}