公共组件 #18

Merged
xiaohai2271 merged 45 commits from dev into master 2020-07-11 10:41:50 +08:00
Showing only changes of commit 551dbc10e5 - Show all commits

View File

@@ -6,7 +6,7 @@ import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} f
<nz-tag *ngIf="!inputVisible" class="editable-tag" title="双击进入编辑" [nzColor]="color" nzNoAnimation <nz-tag *ngIf="!inputVisible" class="editable-tag" title="双击进入编辑" [nzColor]="color" nzNoAnimation
(click)="showInput(true)" (click)="showInput(true)"
[style.border-style]="showBorder ? 'solid': 'none'"> [style.border-style]="showBorder ? 'solid': 'none'">
<ng-content></ng-content> {{text}}
</nz-tag> </nz-tag>
<input #inputElement <input #inputElement
nz-input nz-input
@@ -14,7 +14,6 @@ import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} f
*ngIf="inputVisible" *ngIf="inputVisible"
type="text" type="text"
[(ngModel)]="inputValue" [(ngModel)]="inputValue"
style="width: 78px;"
(blur)="handleInputConfirm()" (blur)="handleInputConfirm()"
(keydown.enter)="handleInputConfirm()" (keydown.enter)="handleInputConfirm()"
/> />
@@ -38,10 +37,12 @@ export class EditableTagComponent implements OnInit {
inputValue = ''; inputValue = '';
@ViewChild('inputElement', {static: false}) inputElement?: ElementRef; @ViewChild('inputElement', {static: false}) inputElement?: ElementRef;
@Output() valueChange = new EventEmitter<string>(); @Output() valueChange = new EventEmitter<{ value: string, originalValue: string, changed: boolean }>();
@Input() color: string; @Input() color: string;
@Input() showEditIcon: boolean; @Input() showEditIcon: boolean;
@Input() showBorder: boolean; @Input() showBorder: boolean;
@Input() text: string;
private doubleClickInfo = { private doubleClickInfo = {
date: null, date: null,
}; };
@@ -56,6 +57,7 @@ export class EditableTagComponent implements OnInit {
} }
showInput(doubleClick: boolean): void { showInput(doubleClick: boolean): void {
this.inputValue = this.text;
if (doubleClick) { if (doubleClick) {
if (!this.doubleClickInfo.date) { if (!this.doubleClickInfo.date) {
this.doubleClickInfo.date = new Date().getTime(); this.doubleClickInfo.date = new Date().getTime();
@@ -77,7 +79,12 @@ export class EditableTagComponent implements OnInit {
} }
handleInputConfirm(): void { handleInputConfirm(): void {
this.valueChange.emit(this.inputValue) this.valueChange.emit({
value: this.inputValue,
originalValue: this.text,
changed: this.inputValue !== this.text
})
this.text = this.inputValue;
this.inputValue = ''; this.inputValue = '';
this.inputVisible = false; this.inputVisible = false;
} }