vue使用clipboardjs实现复制粘贴文本内容

需求：使用 clipboardjs实现文本内容复制粘贴功能

效果图：

为什么要使用clipboard

clipboard.js 让web复制文本到剪贴板不再困难，它使用起来非常简单，仅仅需要几句简单的js代码，而不需要几十个步骤来进行配置或加载数百KB的文件。 更重要的是，它不依赖于 Flash 或 JQuery 或任何臃肿的框架。

安装clipboard ：

npm install clipboard --save

页面引入：

import Clipboard from "clipboard"

也可以使用第三方cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

复制内容：

item.content是当前循环的内容 

<div @click="handleCopy" class="copy copyCode backMsg" :data-clipboard-text="item.content">
     <img src="../../assets/img/copy.png" class="msgImg">
     <span>复制</span>
</div>

// 复制粘贴
    handleCopy() {
      var clipboard = new Clipboard(".copy");
      clipboard.on("success", e => {
        this.$toast({
          message: "复制成功",
          onClose: () => {
            // 释放内存
            clipboard.destroy();
          }
        });
      });
      clipboard.on("error", e => {
        this.$toast({
          message: "复制失败",
          onClose: () => {
            // 释放内存
            clipboard.destroy();
          }
        });
      });
    },

---

扩展

剪切内容 ：

可以定义一个 data-clipboard-action 属性来指定是要复制还是剪切内容。

如果省略此属性，默认情况下将使用复制。

<textarea id="textValue">船长在船上</textarea>


<button class="btn" data-clipboard-action="cut" data-clipboard-target="#textValue">
    Cut to clipboard
</button>