码迷,mamicode.com
首页 > 其他好文 > 详细

关于 angular + 页面复制粘贴功能

时间:2019-08-20 10:36:31      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:src   command   divide   tor   png   comm   selector   color   select   

 <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‘, ‘复制成功‘); }
  • 效果
  • 技术图片

    技术图片

     

关于 angular + 页面复制粘贴功能

标签:src   command   divide   tor   png   comm   selector   color   select   

原文地址:https://www.cnblogs.com/gushiyoyo/p/11381398.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!