angular 复制功能 使用angular material design Clipboard cdk

import { Clipboard } from "@angular/cdk/clipboard";

实例化

  constructor(private clipboard: Clipboard) {}

使用

参考angular clipboard cdk

html：

          <button
          mat-button
          class="mini"
          (click)="copyText(element.operationRefId)"
         >
          <mat-icon>flip_to_front</mat-icon>
          {{element.operationRefId}}
          <div [ngClass]="showCopyMsg ? 'tip' : 'hide-tip'">
            复制{{ copyMsg }}
          </div>
        </button>

ts ：

  copyText(text:string) {
    const result = this.clipboard.copy(text); //angular cdk复制到剪切板
    if (result) {
      this.copyMsg = "成功";
    } else {
      this.copyMsg = "失败";
    }
    this.showCopyMsg = true;
    setTimeout(() => {
      this.showCopyMsg = false;
    }, 2000);
  }

scss,主要是提示的样式

//展示tip
.tip {
  width: 60px;
  height: 24px;
  line-height: 24px;
  border-radius: 4px;
  background: #707070;
  color: white;
  font-size: 10px;
  // 相对于父级的位置
  position: absolute;
  top: 28px;
}

//隐藏tip
.hide-tip {
  display: none;
}