點擊復制指定內容

項目為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 無效)