<div class="user-token-content" *ngIf="tokenMark">
<div class="token-card">
<div class="token-card-content" id="copyInput"> {{tokenContent}} </div>
<div class="token-card-control">
<span nz-tooltip nzTitle="复制token" (click)="copyToken()">
<i nz-icon type="copy" theme="outline"></i>
</span>
<nz-divider nzType="vertical"></nz-divider>
<span nz-tooltip nzTitle="删除token">
<a nz-popconfirm nzTitle="是否删除当前token?" (nzOnConfirm)="confirm()" (nzOnCancel)="cancel()">
<i nz-icon type="delete" theme="outline"></i>
</a>
</span>
</div>
</div>
</div>
// 复制token
// .ts文件
copyToken() {
const copyEl = this.elementRef.nativeElement.querySelector('#copyInput');
const range = document.createRange();
range.selectNode(copyEl);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand('copy');
this.createMessage('success', '复制成功');
}
- 效果
