ClipboardJS 实现点击复制功能

第一篇博客，有点小激动~~~

最近在做关于移动端点击复制内容的一个功能，同事说可以用 clipboard.js

先上一下自己的代码

data.assistant_wechat_num 这是我从后台返回的接口取的，就是我要复制的微信号码

 <div class="bot_copy" :data-clipboard text="data.assistant_wechat_num">
      <div class="copy_img">
          <img src="/static/img/icon_fuzhi.png" alt="">
      </div>
      复制微信号
  </div>

  mounted() {
    var clipboard = new ClipboardJS('.bot_copy');
    clipboard.on('success', function(e) {
      console.log(e);
      alert('复制成功')
    });
    clipboard.on('error', function(e) {
      console.log(e);
      alert('复制失败，请手动复制')
    });
  },

大家可以去GitHub上看一下有很多的小demo，这里就先列举两个（都是我从官网上copy的~~~捂脸）

官网GitHub地址戳这里 https://github.com/zenorocha/clipboard.js

demo1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>function-target</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <!-- 1. Define some markup -->
    <button class="btn">Copy</button>
    <div>hello</div>

    <!-- 2. Include library -->
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
　　 <!--以下三个是备用 浏览器打不开第一个 换下面的-->
　　 <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>-->
　　 <!--<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.0/dist/clipboard.min.js"></script>-->
　　 <!--<script src="https://unpkg.com/clipboard@2.0.0/dist/clipboard.min.js"></script>-->

    <!-- 3. Instantiate clipboard -->
    <script>
    var clipboard = new ClipboardJS('.btn', {
        target: function() {
            return document.querySelector('div');
        }
    });
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
</body>
</html>

demo2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>function-text</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <!-- 1. Define some markup -->
    <button class="btn">Copy</button>

    <!-- 2. Include library -->
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
　　 <!--以下三个是备用 浏览器打不开第一个 换下面的-->
　　 <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>-->
　　 <!--<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.0/dist/clipboard.min.js"></script>-->
　　 <!--<script src="https://unpkg.com/clipboard@2.0.0/dist/clipboard.min.js"></script>-->

    <!-- 3. Instantiate clipboard -->
    <script>
    var clipboard = new ClipboardJS('.btn', {
        text: function() {
            return 'to be or not to be';
        }
    });
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
</body>
</html>

参考地址： https://blog.csdn.net/mp624183768/article/details/82256164