zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Sigma Function 数学 因子求和
    luogu P3800 Power收集
    LibreOJ #110. 乘法逆元
    luogu P3802 小魔女帕琪
    LibreOJ #6000. 「网络流 24 题」搭配飞行员
    LibreOJ #103. 子串查找
    LibreOJ #102. 最小费用流
    LibreOJ #109. 并查集
    BZOJ 1922: [Sdoi2010]大陆争霸
    LibreOJ #119. 最短路
  • 原文地址:https://www.cnblogs.com/lst619247/p/11001827.html
Copyright © 2011-2022 走看看