最近做的一个后台管理系统中，需求是点击右侧小图标，复制当前内容。UI如下：
点击复制.png
功能分析：
我们平时在复制内容时，通常分为两步：
1、拖动鼠标选中内容；
2、ctrl+c，复制完成。
所以当我们通过代码实现，本质上也是模拟这两步来完成。实现思路
1、模拟鼠标选中当前要复制的内容。
2、借助浏览器的复制命令；
//浏览器复制命令,相当于ctrl+c
document.execCommand("Copy");
本文以angular为例，如需在vue等前端框架中使用，只需把对应的生命周期、事件绑定、变量声明等改为vue语法即可！
思路理清楚了，那就直接上代码：
//HTML部分
//data.room.name为想要复制的内容
<p>{{data.room?.name}}</p>
<i (click)="copy(data.room?.name)" nz-icon nzType="copy" nzTheme="twotone"></i>
//ts部分
//点击复制
copy(data:any){
var oInput = document.createElement("input"); //创建一个input标签
oInput.value = data; //将要复制的值赋值给input
document.body.appendChild(oInput); //在页面中插入
oInput.select(); // 模拟鼠标选中
document.execCommand("Copy"); // 执行浏览器复制命令（相当于ctrl+c）
oInput.style.display = "none"; //只是用一下input标签的特性，实际并不需要显示，所以这里要隐藏掉
this.message.success('复制成功');
}
此时，按下ctrl+v就会粘贴出刚刚复制的内容.....
至此，功能实现，特此记录。
