ngzorroantd标签组件tag实现回车连续新增

zorro tag 实现编辑状态、连续新增

• 先看实现效果
  

• 官网给的示例只有新增、删除&＃xff0c;并且不可连续新增。自己制作实现这两个状态。

• 下面直接贴代码了

• 模板中代码&＃xff1a;

  <span *ngFor&＃61;"let tag of tags;let i&＃61;index;"><nz-tag *ngIf&＃61;"tag.visible"[nzMode]&＃61;"i &＃61;&＃61;&＃61; -1 ? &＃39;default&＃39; : &＃39;closeable&＃39;"(nzAfterClose)&＃61;"handleClose(tag)"(click)&＃61;"showInputInArray(tag)"(nzOnClose)&＃61;"onCloseTagInArray()"><span style&＃61;"font-size:1.2em;">{{ sliceTagName(tag.text) }}span>nz-tag><input #inputElementInArray*ngIf&＃61;"!tag.visible"type&＃61;"text" nz-input nzSize&＃61;&＃39;small&＃39; style&＃61;"width:78px;"[(ngModel)]&＃61;"tag.text"(blur)&＃61;"handleInputConfirmInArray(tag)"(keydown.enter)&＃61;"handleInputConfirmInArray(tag)">
span><nz-tag*ngIf&＃61;"!inputVisible"class&＃61;"editable-tag"(click)&＃61;"showInput()"><i nz-icon type&＃61;"plus">i><span style&＃61;"font-size:1.2em;">点我新增span>
nz-tag><input#inputElementnz-inputnzSize&＃61;"small"*ngIf&＃61;"inputVisible" type&＃61;"text"[(ngModel)]&＃61;"inputValue"style&＃61;"width: 78px;"(blur)&＃61;"handleInputConfirm()"(keydown.enter)&＃61;"handleInputConfirm()">


• CSS代码

  .editable-tag ::ng-deep .ant-tag {background: rgb(255, 255, 255);border-style: dashed;
}

• ts代码

  import { Component, OnInit, ViewChild, ElementRef } from &＃39;&＃64;angular/core&＃39;;
import { NzMessageService } from &＃39;ng-zorro-antd&＃39;;&＃64;Component({selector: &＃39;app-tag-edit&＃39;,templateUrl: &＃39;./tag-edit.component.html&＃39;,styleUrls: [&＃39;./tag-edit.component.css&＃39;]
})
export class TagEditComponent implements OnInit {private tag01:CcTag &＃61; new CcTag();private tag02:CcTag &＃61; new CcTag();private tag03:CcTag &＃61; new CcTag();private tags:CcTag[] &＃61; [];private skipClick:boolean &＃61; false;private newOngoing:boolean &＃61; true;inputVisible &＃61; false;inputValue &＃61; &＃39;&＃39;;&＃64;ViewChild(&＃39;inputElement&＃39;) inputElement: ElementRef;&＃64;ViewChild(&＃39;inputElementInArray&＃39;) inputElementInArray: ElementRef;//#region 系统生命周期钩子constructor(private msg:NzMessageService) { }ngOnInit() {this.initTags();}//#endregion//#region 初始化数据initTags(){this.tag01.text&＃61;&＃39;单袋&＃39;;this.tag01.value&＃61;&＃39;单袋&＃39;;this.tag01.visible&＃61;true;this.tag02.text&＃61;&＃39;双袋&＃39;;this.tag02.value&＃61;&＃39;双袋&＃39;;this.tag02.visible&＃61;true;this.tag03.text&＃61;&＃39;编织袋&＃39;;this.tag03.value&＃61;&＃39;编织袋&＃39;;this.tag03.visible&＃61;true;this.tags.push(this.tag01);this.tags.push(this.tag02);this.tags.push(this.tag03);}//#endregionhandleClose(removedTag: {}): void {this.tags &＃61; this.tags.filter(tag &＃61;> tag !&＃61;&＃61; removedTag);}sliceTagName(tag: string): string {const isLongTag &＃61; tag.length > 20;return isLongTag ? &＃96;${tag.slice(0, 20)}...&＃96; : tag;}showInput(): void {this.inputVisible &＃61; true;setTimeout(() &＃61;> {this.inputElement.nativeElement.focus();}, 10);}// 数组反应到UI上的inputshowInputInArray(tag:CcTag){if(this.skipClick){this.skipClick &＃61; false;return;}tag.visible&＃61;false;setTimeout(() &＃61;> {this.inputElementInArray.nativeElement.focus();}, 10);}handleInputConfirmInArray(tag:CcTag){tag.visible&＃61;true;}handleInputConfirm(): void {var target:CcTag &＃61; new CcTag();target.text&＃61;this.inputValue;target.value&＃61;this.inputValue;target.visible&＃61;true;if (this.inputValue && this.tags.indexOf(target) &＃61;&＃61;&＃61; -1) {this.tags.push(target);this.inputValue&＃61;&＃39;&＃39;;this.showInput();}else{this.inputValue &＃61; &＃39;&＃39;;this.inputVisible &＃61; false;}}onCloseTagInArray(){this.skipClick &＃61; true;}
}export class CcTag{public text:string;public value:string;public visible:boolean;
}