点击复制指定内容

项目为angualr4

1.在HTML中加一个input

 

 新建一个input,不可display:none，不能设置宽高为0，否则无效。选择上上面盖一层，背景同父色

.copy-wraper {
  position: relative;

}
.copy-wraper .copy-bgc {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 30px;
  height: 20px;
  background-color: #efefef;
}
.copy-wraper input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 10px;
  height: 10px;
}

 

<div class="copy-wraper">
          <div class="copy-bgc"></div>
          <input type="text" name="copyInput" id="copyInput" [(ngModel)]="copyvalue"
          >
        </div>

 

 

2.js代码

import { ElementRef } from '@angular/core';
 
public copyvalue = '';
 
public toCopy(item) {
const input = this.el.nativeElement.querySelector('#copyInput');
this.copyvalue = item.url;
input.value = item.url;
input.select();
document.execCommand('Copy');
this._message.success('复制成功');
}
 
constructor(
private el: ElementRef
) {}

 

(getElementByClassName 无效)