項目中要實現分享功能,現在各種接口都關閉了,而且不同的瀏覽器要使用不同的代碼,最后決定直接復制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>
