ng-alain封装类似windows ip框查询组件

1、组件样式

2、组件代码

import { Component, ElementRef, ViewChild, ViewEncapsulation } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd';
import { AppUtil } from '@core/util/util.service';

@Component({
  selector: 'app-ip-input',
  template: `
  <div class="div-input-border">
      <nz-tooltip nzTrigger="focus" nzPlacement="topLeft" nzOverlayClassName="numeric-input" [nzTitle]="title">
        <input name="ipName" class="ip-input" #inputElement1 nz-input nz-tooltip
               [ngModel]="value1" value="*" ngDefaultControl (ngModelChange)="onChange($event, 1)" 
               (focus)="onFocus(1)" (blur)="onBlur(1)" (keyup)="onKeyup(1, $event)">.
        <input name="ipName" class="ip-input" #inputElement2 nz-input nz-tooltip
               [ngModel]="value2" value="*" ngDefaultControl (ngModelChange)="onChange($event, 2)"
               (focus)="onFocus(2)" (blur)="onBlur(2)" (keyup)="onKeyup(2, $event)">.
        <input name="ipName" class="ip-input" #inputElement3 nz-input nz-tooltip
               [ngModel]="value3" value="*" ngDefaultControl (ngModelChange)="onChange($event, 3)"
               (focus)="onFocus(3)"  (blur)="onBlur(3)" (keyup)="onKeyup(3, $event)">.
        <input name="ipName" class="ip-input" #inputElement4 nz-input nz-tooltip
               [ngModel]="value4" value="*" ngDefaultControl (ngModelChange)="onChange($event, 4)"
               (focus)="onFocus(4)"  (blur)="onBlur(4)" (keyup)="onKeyup(4, $event)">
    </nz-tooltip>
  </div>`,
  styles: [`
      .numeric-input .ant-tooltip-inner {
        min-width: 32px;
        min-height: 37px;
      }
      .numeric-input .numeric-input-title {
        font-size: 14px;
      }
    .div-input-border {
      width: 230px;
      text-align: center;
      border-bottom:1px ridge threedshadow;
    }
    .ip-input {
      width: 50px;
      text-align:center;
      border-width:0;
    }
  `
  ]
})
export class IpInputWidgetComponent {
  constructor(
    public msg: NzMessageService,
    public util: AppUtil
  ) {}
  static readonly KEY = 'ipInput';

  value1 = '*';
  value2 = '*';
  value3 = '*';
  value4 = '*';

  value = this.value1 + '.' + this.value2  + '.' + this.value3 + '.'  + this.value4;
  title = '请输入IP地址';
  isFirst = false;

  @ViewChild('inputElement1') inputElement1: ElementRef;
  @ViewChild('inputElement2') inputElement2: ElementRef;
  @ViewChild('inputElement3') inputElement3: ElementRef;
  @ViewChild('inputElement4') inputElement4: ElementRef;

  onChange(value: string, type: number ): void {
    this.updateValue(value, type);
  }
  onKeyup(num, ev) {
    const keyCode = ev.keyCode;
    // 键盘事件 左右和空格绑定移动事件
    if (keyCode === 32 || keyCode === 39) {
      this.enterNext(num, true);
    } else if (keyCode === 37) {
      this.enterLast(num, true);
    }
  }

  /**
   * 光标下一步
   * @param {number} num 位置
   * @param {boolean} loop 是否循环
   */
  enterNext(num: number, loop: boolean) {
    if (this['inputElement' + (num + 1)]) {
      this['inputElement' + (num + 1)].nativeElement.focus();
    } else if (loop) {
      this.inputElement1.nativeElement.focus();
    }
  }

  /**
   * 光标上一步
   * @param {number} num 位置
   * @param {boolean} loop 是否循环
   */
  enterLast(num: number, loop: boolean) {
    if (this['inputElement' + (num - 1)]) {
      this['inputElement' + (num - 1)].nativeElement.focus();
    } else if (loop) {
      this.inputElement4.nativeElement.focus();
    }
  }
  /**
   * Blur事件 当触发blur时 判断是否有值 如果没值给输入框设置默认值
   * @param type
   */
  onBlur(type): void {
    if (this['value' + type] === '') {
      this['value' + type] = '*';
      this.updateValue(this['value' + type], type);
    }
  }
  /**
   * Focus 触发时当值为默认值时，删除掉默认值
   * @param type
   */
  onFocus(type) {
    if (this['value' + type] === '*') {
      this['value' + type] = '';
      this.updateTitle();
    }
  }
  /**
   * 刷新数据
   * @param {string} value
   * @param {number} type
   */
  updateValue(value: string, type: number): void {
    const reg = /^(25[0-5]|2[0-4][0-9]|[0-1]?[0-9]?[0-9])$/; // /^(([0-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5]))))$/;
    if ((!isNaN(+value) && reg.test(value)) || value === '' || value === '*') {
      this['value' + type] = value;
      this.setValue();
      if (value.length >= 3) {
        this.enterNext(type, false);
      }
    }
    this['inputElement' + type].nativeElement.value = this['value' + type];
    this.updateTitle();
  }

  /**
   * 回复默认
   */
  resetVal() {
    this.value1 = '*';
    this.value2 = '*';
    this.value3 = '*';
    this.value4 = '*';
    this.setValue();
  }
  /**
   * 给model赋值 方便父组件拿到这个值
   */
  setValue() {
    this.value = this.value1 + '.' + this.value2  + '.' + this.value3 + '.'  + this.value4;
  }

  /**
   * 更新提示信息
   */
  updateTitle(): void {
    this.title = this.isFirst ? this.value || this.title : this.title;
    this.isFirst = true;
  }
}