在項(xiàng)目需要完成點(diǎn)擊復(fù)制卡卷號(hào)到粘貼板的功能，百度了下發(fā)現(xiàn)有多種方式來(lái)實(shí)現(xiàn)：

1:js原生方法中的document.execCommand(),但是存在兼容的問(wèn)題
2:使用ZeroClipboard.js,但是這個(gè)需要flash 現(xiàn)在越來(lái)越多的瀏覽器都不支持flash.
3:使用clipboard.js來(lái)實(shí)現(xiàn).兼容性較好,而且vue有對(duì)應(yīng)的插件.(推薦使用)

因?yàn)榧嫒莸膯?wèn)題因此采用clipboard來(lái)實(shí)現(xiàn),

<input class="foo" type="text" value="hello">
<button class="btn" data-clipboard-action="copy" data-clipboard-target="foo">Copy</button>
<script>
// button的class的值
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>

data-clipboard-action="copy/cut" 表示是復(fù)制還是剪切.
data-clipboard-target="foo" 是指通過(guò)class為foo來(lái)找到需要復(fù)制的dom元素. 也可以來(lái)用id來(lái)找
js里面的就是默認(rèn)的方法呢,success為成功的回調(diào). error為失敗的回調(diào).

遇到的問(wèn)題:
1:需要綁定多個(gè)按鈕時(shí),使用class來(lái)找. 且當(dāng)需要綁定多個(gè)時(shí), 粘貼的值與點(diǎn)擊的盒子的class必須一樣且唯一.
應(yīng)為我的html是通過(guò)art-template來(lái)渲染的,所以為防止多個(gè)卷的class一樣,就加上了 index值.

需要綁定多個(gè)時(shí)的寫(xiě)法

2:ios上可能會(huì)出現(xiàn)點(diǎn)擊沒(méi)有反應(yīng)的問(wèn)題 在copy的那個(gè)按鈕上需要加上行內(nèi)綁定的空點(diǎn)擊事件 .
onclick= "".