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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM