clipboard.js插件的使用

在项目需要完成点击复制卡卷号到粘贴板的功能,百度了下发现有多种方式来实现:

1:js原生方法中的document.execCommand(),但是存在兼容的问题
2:使用ZeroClipboard.js,但是这个需要flash 现在越来越多的浏览器都不支持flash.
3:使用clipboard.js来实现.兼容性较好,而且vue有对应的插件.(推荐使用)

因为兼容的问题因此采用clipboard来实现,



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= "".

你可能感兴趣的:(clipboard.js插件的使用)