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

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

猜你喜欢

转载自www.cnblogs.com/lst619247/p/11001827.html