vue项目中实现复制内容到剪贴板

最新推荐文章于 2024-05-30 08:42:49 发布

yang_B621

最新推荐文章于 2024-05-30 08:42:49 发布

阅读量727

点赞数

分类专栏： VUE 文章标签： vue项目中实现复制内容到剪贴板

本文链接：https://blog.csdn.net/qq_23018459/article/details/93195502

版权

VUE 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

项目中要实现分享功能，现在各种接口都关闭了，而且不同的浏览器要使用不同的代码，最后决定直接复制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>

复制代码

yang_B621

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue项目中实现复制内容到剪贴板

项目中要实现分享功能，现在各种接口都关闭了，而且不同的浏览器要使用不同的代码，最后决定直接复制url，然后手动分享Vue中使用了vue-clipboard2github地址：https://github.com/Inndy/vue-clipboard2例子：1 npm install --save vue-clipboard2main.js引入1 import VueC...
复制链接

扫一扫

专栏目录