typescript 用于在输入中显示/隐藏密码的Angular7指令

Posted 2021-05-20

import {Directive, ElementRef} from '@angular/core';

@Directive({
  selector: '[appInputPassword]'
})
export class InputPasswordDirective {

  private _shown = false;

  private eyeTemplateShow = '<div class="icon brand-background" style="-webkit-mask: url(/assets/svg/view.svg) no-repeat center; mask: url(/assets/svg/view.svg) no-repeat center; width: 30px; height: 30px; float: right; position: relative; margin-top: -31px; right: 10px; cursor:pointer"></div>'
  private eyeTemplateHide = '<div class="icon brand-background" style="-webkit-mask: url(/assets/svg/hide.svg) no-repeat center; mask: url(/assets/svg/hide.svg) no-repeat center; width: 31px; height: 30px; float: right; position: relative; margin-top: -31px; right: 10px; cursor:pointer"></div>'

  constructor(private el: ElementRef) {
    this.setup();
  }

  toggle(span: HTMLElement) {
    this._shown = !this._shown;
    if (this._shown) {
      this.el.nativeElement.setAttribute('type', 'text');
      span.innerHTML = this.eyeTemplateHide;
    } else {
      this.el.nativeElement.setAttribute('type', 'password');
      span.innerHTML = this.eyeTemplateShow;
    }
  }

  setup() {
    const parent = this.el.nativeElement.parentNode;
    const span = document.createElement('span');

    span.innerHTML = this.eyeTemplateShow;
    span.addEventListener('click', (event) => {
      this.toggle(span);
    });
    parent.appendChild(span);
  }
}