vue项目中实现复制内容到剪贴板
项目中要实现分享功能，现在各种接口都关闭了，而且不同的浏览器要使用不同的代码，最后决定直接复制url，然后手动分享
Vue中使用了vue-clipboard2
github地址：https://github.com/Inndy/vue-clipboard2
例子：
1 npm install --save vue-clipboard2
main.js引入
1 import VueClipboard from 'vue-clipboard2' 2 3 Vue.use(VueClipboard)
组件中的代码：
1 <div class="shareline" v-clipboard:copy="copyUrl" v-clipboard:success="onCopy" v-clipboard:error="onError"> 3 <p>复制链接</p> 4 </div>
copyUrl：想要复制的内容，自定义
onCopy：方法，复制成功后操作
onError：方法，复制失败后操作
下面这个也可以
clipboard.js
vue中我最开始用这个了，不知道为什么，点击没有反应
github地址：https://github.com/zenorocha/clipboard.js
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>constructor-node</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 </head> 8 <body> 9 <!-- 1. Define some markup --> 10 <div id="btn" data-clipboard-text="1eqeqweqwe"> 11 <span>Copy</span> 12 </div> 13 14 <!-- 2. Include library --> 15 <script src="../dist/clipboard.min.js"></script> 16 17 <!-- 3. Instantiate clipboard by passing a HTML element --> 18 <script> 19 var btn = document.getElementById('btn'); 20 var clipboard = new ClipboardJS(btn); 21 console.log(clipboard) 22 clipboard.on('success', function(e) { 23 console.log(e); 24 }); 25 26 clipboard.on('error', function(e) { 27 console.log(e); 28 }); 29 </script> 30 </body> 31 </html>
