一、在 Vue 中使用
安装依赖：
npm install clipboard --save
在 HTML 层次进行复制：
//①引入包
import ClipboardJS from "clipboard";
//②通过 new 来实例化一次
mounted(){
new ClipboardJS('.btn');
},
//③直接使用
<h4 id="copy" value="http://www.baidu.com">http://www.baidu.com</h4>
<el-button class="btn" data-clipboard-target="#copy">一键复制</el-button>
通过 new 来实例化这个按钮，按钮通过属性 data-clipboard-target 在触发器元素中添加属性来实现，触发器会自动去寻找你指定的 id 元素，这个元素标签上的 value 就是你要复制的值。
电脑剪切板里面复制之前的数据是用户昵称，当我点一键复制的时候，被复制标签内容被选中。复制成功。
可以定义一个data-clipboard-action属性来指定是否要copy或cut内容。如果省略此属性，copy将默认使用。cut操作仅对<input>或起作用<textarea>。
改动代码如下：
<el-input style="width:200px;" id="copy" v-model="value"></el-input>
<el-button class="btn" data-clipboard-target="#copy" data-clipboard-action="cut">一键复制</el-button>
可以不复制其他内容，只复制你指定的内容。通过 data-clipboard-text 来实现，改動代碼如下：
<el-button class="btn" data-clipboard-text="自定義内容">一键复制</el-button>
某些情况下，我们想反馈用户在复制/剪切操作是否成功的交互效果。就类似下面这样：
核心代码思路，不用讲一看你就懂：
<span id = 'copyWallet'>需要被复制的内容</span>
<el-button
type="text"
data-clipboard-target="#copyWallet"
@click="copyWalletActive()"
id="copyButton"
>复制</el-button>
<=======分割线=======>
copyWalletActive() {
this.$nextTick(()=>{
const clipboard = new Clipboard("#copyButton");
clipboard.on('success', e => {
this.$message({ type: 'success', message: '复制成功' });
// 释放内存
clipboard.destroy();
});
clipboard.on('error', e => {
// 不支持复制
this.$message({ type: 'warning', message: '该浏览器不支持自动复制' });
// 释放内存
clipboard.destroy();
});
});
}
到这里遇到一个比较头疼的问题，当我们点击复制的时候，发现被复制的文字会默认被选中，就是去不掉，那只能另外想办法了，我想的办法是再放一个和被复制标签一样的一样标签，然后通过 overflow:hidden; 来隐藏，实验结果是不行，复制功能都失效了，那只能通过定位，让元素飞出屏幕。代码如下：
<span>需要被复制的内容</span>
<span style="position:fixed;top:-1000000px;" id = 'copyWallet'>需要被复制的内容</span>
这次终于成了。
解决遗留的bug
上面留的那个头疼的问题，我当时写的时候就知道不能这么玩，但是为了生产没办法，无论好看与否业务能写出来就行了，今天吧官方文档看了下，里面讲的清清楚楚。只是这些文档不像小说人人能看懂，人人能理解。
看看官网描述的高级用法：
如果你不想修改 HTML，我们提供了一个非常方面的命令式的 API 给你使用。你需要做的就是声明一个函数，做一些处理，并返回一个值。
如果你不想修改 HTML，这里指的就是默认情况下复制会选中文本。来看看用法：
this.$nextTick(()=>{
let that = this;
const clipboard = new Clipboard("#copyButton",{
text:()=>{
return that.$refs.copyWallet[0].innerHTML;
}
});
clipboard.on('success', e => {
this.$message({ type: 'success', message: '复制成功' });
// 释放内存
clipboard.destroy();
});
clipboard.on('error', e => {
// 不支持复制
this.$message({ type: 'warning', message: '该浏览器不支持自动复制' });
// 释放内存
clipboard.destroy();
});
});
就增加了一个函数用函数的返回值来替代默认行为。有点像 get 和 set 的意思。
补充时间：2020年1月2日20:04:12
二、使用 JS 原生配合 execCommand() 实现复制（剪切）到粘贴板
1. 从可编辑内容区域复制（input 的 type 为 input 或 textarea）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用 JS 原生配合 execCommand() 实现复制（剪切）到粘贴板</title>
</head>
<body>
<input id="ipt" value="hello world">
<button id="btn">点我复制</button>
<script>
const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
const ipt = document.querySelector('#ipt');
ipt.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
// 注释代码为去除选中样式
// 这里需要用到input元素的两个属性：
// selectionStart：选区开始位置；
// selectionEnd：选区结束位置。
// ipt.selectionStart = 0;
// ipt.selectionEnd = 0;
// ipt.blur();
console.log('复制成功');
}else{
console.log('设备不支持execCommand方法');
}
});
</script>
</body>
</html>
2. 不可编辑内容标签的复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用 JS 原生配合 execCommand() 实现复制（剪切）到粘贴板</title>
</head>
<body>
<h1 id="ipt">hello world</h1>
<button id="btn">点我复制</button>
<script>
const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
const ipt = document.querySelector('#ipt');
const text = document.createElement("textarea");
text.setAttribute('readonly', 'readonly');
text.setAttribute('value', ipt.textContent);
// text.value = ipt.textContent;
document.body.appendChild(text);
text.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
document.body.removeChild(text);
console.log('复制成功');
}else{
console.log('设备不支持execCommand方法');
}
});
</script>
</body>
</html>
补充：2020年3月30日15点00分 来京的第一天，新冠状病毒还在国外肆虐，北京小区还在实行强制隔离 14 天。还好我住的是公寓。
