一、在 Vue 中使用
安裝依賴：
npm install clipboard --save
在 HTML 層次進行復(fù)制：
//①引入包
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">一鍵復(fù)制</el-button>
通過 new 來實例化這個按鈕，按鈕通過屬性 data-clipboard-target 在觸發(fā)器元素中添加屬性來實現(xiàn)，觸發(fā)器會自動去尋找你指定的 id 元素，這個元素標(biāo)簽上的 value 就是你要復(fù)制的值。
電腦剪切板里面復(fù)制之前的數(shù)據(jù)是用戶昵稱，當(dāng)我點一鍵復(fù)制的時候，被復(fù)制標(biāo)簽內(nèi)容被選中。復(fù)制成功。
可以定義一個data-clipboard-action屬性來指定是否要copy或cut內(nèi)容。如果省略此屬性，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">一鍵復(fù)制</el-button>
可以不復(fù)制其他內(nèi)容，只復(fù)制你指定的內(nèi)容。通過 data-clipboard-text 來實現(xiàn)，改動代碼如下：
<el-button class="btn" data-clipboard-text="自定義內(nèi)容">一鍵復(fù)制</el-button>
某些情況下，我們想反饋用戶在復(fù)制/剪切操作是否成功的交互效果。就類似下面這樣：
核心代碼思路，不用講一看你就懂：
<span id = 'copyWallet'>需要被復(fù)制的內(nèi)容</span>
<el-button
type="text"
data-clipboard-target="#copyWallet"
@click="copyWalletActive()"
id="copyButton"
>復(fù)制</el-button>
<=======分割線=======>
copyWalletActive() {
this.$nextTick(()=>{
const clipboard = new Clipboard("#copyButton");
clipboard.on('success', e => {
this.$message({ type: 'success', message: '復(fù)制成功' });
// 釋放內(nèi)存
clipboard.destroy();
});
clipboard.on('error', e => {
// 不支持復(fù)制
this.$message({ type: 'warning', message: '該瀏覽器不支持自動復(fù)制' });
// 釋放內(nèi)存
clipboard.destroy();
});
});
}
到這里遇到一個比較頭疼的問題，當(dāng)我們點擊復(fù)制的時候，發(fā)現(xiàn)被復(fù)制的文字會默認被選中，就是去不掉，那只能另外想辦法了，我想的辦法是再放一個和被復(fù)制標(biāo)簽一樣的一樣標(biāo)簽，然后通過 overflow:hidden; 來隱藏，實驗結(jié)果是不行，復(fù)制功能都失效了，那只能通過定位，讓元素飛出屏幕。代碼如下：
<span>需要被復(fù)制的內(nèi)容</span>
<span style="position:fixed;top:-1000000px;" id = 'copyWallet'>需要被復(fù)制的內(nèi)容</span>
這次終于成了。
解決遺留的bug
上面留的那個頭疼的問題，我當(dāng)時寫的時候就知道不能這么玩，但是為了生產(chǎn)沒辦法，無論好看與否業(yè)務(wù)能寫出來就行了，今天吧官方文檔看了下，里面講的清清楚楚。只是這些文檔不像小說人人能看懂，人人能理解。
看看官網(wǎng)描述的高級用法：
如果你不想修改 HTML，我們提供了一個非常方面的命令式的 API 給你使用。你需要做的就是聲明一個函數(shù)，做一些處理，并返回一個值。
如果你不想修改 HTML，這里指的就是默認情況下復(fù)制會選中文本。來看看用法：
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: '復(fù)制成功' });
// 釋放內(nèi)存
clipboard.destroy();
});
clipboard.on('error', e => {
// 不支持復(fù)制
this.$message({ type: 'warning', message: '該瀏覽器不支持自動復(fù)制' });
// 釋放內(nèi)存
clipboard.destroy();
});
});
就增加了一個函數(shù)用函數(shù)的返回值來替代默認行為。有點像 get 和 set 的意思。
補充時間：2020年1月2日20:04:12
二、使用 JS 原生配合 execCommand() 實現(xiàn)復(fù)制（剪切）到粘貼板
1. 從可編輯內(nèi)容區(qū)域復(fù)制（input 的 type 為 input 或 textarea）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用 JS 原生配合 execCommand() 實現(xiàn)復(fù)制（剪切）到粘貼板</title>
</head>
<body>
<input id="ipt" value="hello world">
<button id="btn">點我復(fù)制</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：選區(qū)開始位置；
// selectionEnd：選區(qū)結(jié)束位置。
// ipt.selectionStart = 0;
// ipt.selectionEnd = 0;
// ipt.blur();
console.log('復(fù)制成功');
}else{
console.log('設(shè)備不支持execCommand方法');
}
});
</script>
</body>
</html>
2. 不可編輯內(nèi)容標(biāo)簽的復(fù)制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用 JS 原生配合 execCommand() 實現(xiàn)復(fù)制（剪切）到粘貼板</title>
</head>
<body>
<h1 id="ipt">hello world</h1>
<button id="btn">點我復(fù)制</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('復(fù)制成功');
}else{
console.log('設(shè)備不支持execCommand方法');
}
});
</script>
</body>
</html>
補充：2020年3月30日15點00分 來京的第一天，新冠狀病毒還在國外肆虐，北京小區(qū)還在實行強制隔離 14 天。還好我住的是公寓。
