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