在項(xiàng)目需要完成點(diǎn)擊復(fù)制卡卷號到粘貼板的功能，百度了下發(fā)現(xiàn)有多種方式來實(shí)現(xiàn)：
1:js原生方法中的document.execCommand(),但是存在兼容的問題
2:使用ZeroClipboard.js,但是這個(gè)需要flash 現(xiàn)在越來越多的瀏覽器都不支持flash.
3:使用clipboard.js來實(shí)現(xiàn).兼容性較好,而且vue有對應(yīng)的插件.(推薦使用)
因?yàn)榧嫒莸膯栴}因此采用clipboard來實(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" 是指通過class為foo來找到需要復(fù)制的dom元素. 也可以來用id來找
js里面的就是默認(rèn)的方法呢,success為成功的回調(diào). error為失敗的回調(diào).
遇到的問題:
1:需要綁定多個(gè)按鈕時(shí),使用class來找. 且當(dāng)需要綁定多個(gè)時(shí), 粘貼的值與點(diǎn)擊的盒子的class必須一樣且唯一.
應(yīng)為我的html是通過art-template來渲染的,所以為防止多個(gè)卷的class一樣,就加上了 index值.
2:ios上可能會(huì)出現(xiàn)點(diǎn)擊沒有反應(yīng)的問題 在copy的那個(gè)按鈕上需要加上行內(nèi)綁定的空點(diǎn)擊事件 .
onclick= "".
