在項目需要完成點擊復制卡卷號到粘貼板的功能，百度了下發(fā)現(xiàn)有多種方式來實現(xiàn)：

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

因為兼容的問題因此采用clipboard來實現(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" 表示是復制還是剪切.
data-clipboard-target="foo" 是指通過class為foo來找到需要復制的dom元素. 也可以來用id來找
js里面的就是默認的方法呢,success為成功的回調. error為失敗的回調.

遇到的問題:
1:需要綁定多個按鈕時,使用class來找. 且當需要綁定多個時, 粘貼的值與點擊的盒子的class必須一樣且唯一.
應為我的html是通過art-template來渲染的,所以為防止多個卷的class一樣,就加上了 index值.

需要綁定多個時的寫法

2:ios上可能會出現(xiàn)點擊沒有反應的問題 在copy的那個按鈕上需要加上行內綁定的空點擊事件 .
onclick= "".