vue中使用粘贴板clipboard实现一键复制功能

1、安装clipboard ： npm install clipboard --save

2、在局部页面中引入：

import Clipboard from "clipboard"

3、具体使用：

方式一：

<div class="copy" @click="copyUrl(item.url)">复制</div>

<script>
import Clipboard from "clipboard";

export default {
  methods: {
    // 点击一键复制url
    copyUrl(url) {
      let clipboard = new Clipboard(".copy", {
        text: () => {
          return url;
        },
      });
      clipboard.on("success", () => {
        this.$message.success("复制成功！");
        clipboard.destroy();
      });
      clipboard.on("error", () => {
        this.$message.error("该浏览器不支持自动复制,请手动复制！");
        clipboard.destroy();
      });
    }
  }
}
</script>

方式二：

<div
  class="copy"
  :data-clipboard-text="item.url"  <!-- 这里放要复制的内容 -->
  @click="copyUrl"
>
  复制
</div>

<script>
import Clipboard from "clipboard";

export default {
  methods: {
    // 点击一键复制url
    copyUrl() {
      const clipboard = new Clipboard(".copy");
      clipboard.on("success", (e) => {
        this.$message({ type: "success", message: "复制成功" });
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        this.$message({ type: "waning", message: "该浏览器不支持自动复制" });
        // 释放内存
        clipboard.destroy();
      });
    }
  }
}
</script>

4、最终效果：