在项目需要完成点击复制卡卷号到粘贴板的功能，百度了下发现有多种方式来实现：
1:js原生方法中的document.execCommand(),但是存在兼容的问题
2:使用ZeroClipboard.js,但是这个需要flash 现在越来越多的浏览器都不支持flash.
3:使用clipboard.js来实现.兼容性较好,而且vue有对应的插件.(推荐使用)
因为兼容的问题因此采用clipboard来实现,
<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上可能会出现点击没有反应的问题 在copy的那个按钮上需要加上行内绑定的空点击事件 .
onclick= "".
