- 先看效果
- 官网给的示例只有新增、删除,并且不可连续新增。自己制作实现这两个状态。最最要吐槽的是tag内的字体不能设置
不知是不是我没找到,如果找到的同学请联系我:409223171@qq.com - 下面直接贴代码了
- 模板中代码:
<span
*ngFor="let tag of tags;let i=index;">
<nz-tag *ngIf="tag.visible"
[nzMode]="i === -1 ? 'default' : 'closeable'"
(nzAfterClose)="handleClose(tag)"
(click)="showInputInArray(tag)"
(nzOnClose)="onCloseTagInArray()">
<span style="font-size:1.2em;">{{ sliceTagName(tag.text) }}</span>
</nz-tag>
<input #inputElementInArray
*ngIf="!tag.visible"
type="text" nz-input nzSize='small' style="width:78px;"
[(ngModel)]="tag.text"
(blur)="handleInputConfirmInArray(tag)"
(keydown.enter)="handleInputConfirmInArray(tag)">
</span>
<nz-tag
*ngIf="!inputVisible"
class="editable-tag"
(click)="showInput()">
<i nz-icon type="plus"></i>
<span style="font-size:1.2em;">点我新增</span>
</nz-tag>
<input
#inputElement
nz-input
nzSize="small"
*ngIf="inputVisible" type="text"
[(ngModel)]="inputValue"
style="width: 78px;"
(blur)="handleInputConfirm()"
(keydown.enter)="handleInputConfirm()">
.editable-tag ::ng-deep .ant-tag {
background: rgb(255, 255, 255);
border-style: dashed;
}
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd';
@Component({
selector: 'app-tag-edit',
templateUrl: './tag-edit.component.html',
styleUrls: ['./tag-edit.component.css']
})
export class TagEditComponent implements OnInit {
private tag01:CcTag = new CcTag();
private tag02:CcTag = new CcTag();
private tag03:CcTag = new CcTag();
private tags:CcTag[] = [];
private skipClick:boolean = false;
private newOngoing:boolean = true;
inputVisible = false;
inputValue = '';
@ViewChild('inputElement') inputElement: ElementRef;
@ViewChild('inputElementInArray') inputElementInArray: ElementRef;
//#region 系统生命周期钩子
constructor(
private msg:NzMessageService
) { }
ngOnInit() {
this.initTags();
}
//#endregion
//#region 初始化数据
initTags(){
this.tag01.text='单袋';
this.tag01.value='单袋';
this.tag01.visible=true;
this.tag02.text='双袋';
this.tag02.value='双袋';
this.tag02.visible=true;
this.tag03.text='编织袋';
this.tag03.value='编织袋';
this.tag03.visible=true;
this.tags.push(this.tag01);
this.tags.push(this.tag02);
this.tags.push(this.tag03);
}
//#endregion
handleClose(removedTag: {}): void {
this.tags = this.tags.filter(tag => tag !== removedTag);
}
sliceTagName(tag: string): string {
const isLongTag = tag.length > 20;
return isLongTag ? `${tag.slice(0, 20)}...` : tag;
}
showInput(): void {
this.inputVisible = true;
setTimeout(() => {
this.inputElement.nativeElement.focus();
}, 10);
}
// 数组反应到UI上的input
showInputInArray(tag:CcTag){
if(this.skipClick){
this.skipClick = false;
return;
}
tag.visible=false;
setTimeout(() => {
this.inputElementInArray.nativeElement.focus();
}, 10);
}
handleInputConfirmInArray(tag:CcTag){
tag.visible=true;
}
handleInputConfirm(): void {
var target:CcTag = new CcTag();
target.text=this.inputValue;
target.value=this.inputValue;
target.visible=true;
if (this.inputValue && this.tags.indexOf(target) === -1) {
this.tags.push(target);
this.inputValue='';
this.showInput();
}else{
this.inputValue = '';
this.inputVisible = false;
}
}
onCloseTagInArray(){
this.skipClick = true;
}
}
export class CcTag{
public text:string;
public value:string;
public visible:boolean;
}