vue点击实现一键复制功能

1. 首先安装插件

npm install clipboard --save

2. 引用

在 js 中添加引用：

3. 使用（可参考官网：Clipboard.js）

1. 第一种使用方式： 从另一个元素复制文本。

<input type="text" id="copy_input"/>
<div class="copyBtn" data-clipboard-target="#copy_input" @click="copy">Copy to clipboard</div>

@click=”copy“ 作用：提示信息，可加可不加此功能。—— 如果无提示信息出来，则要引用 element-plus 组件的 Message 消息提示。

注意：要在 methods 方法中添加，否则无效。

<script>
/**复制功能 */
import ClipboardJS from "clipboard";
export default {
  methods: {
    copy() {
      var copyBtn = new ClipboardJS("#copy_input");
      copyBtn.on("success", (e) => {
        this.$message({
          message: "已成功复制",
          type: "success",
        });
        copyBtn.destroy(); // 释放内存
        console.log(e);
      });
      copyBtn.on("error", (e) => {
        this.$message({
          message: "复制失败",
          type: "error",
        });
        copyBtn.destroy();
        console.log(e);
      });
    },
  },
};
</script>

说明：

一个非常常见的用例是从另一个元素复制内容。可以通过添加 data-clipboard-target 属性在触发器元素中。
data-clipboard-target 属性值为 的 id。

2. 第二种使用方式：从另一个元素中剪切文本。

此外，还可以定义 data-clipboard-action 属性指定是否需要 copy 或 cut 内容。

注意：1. 如果你省略了这个属性，copy 默认情况下使用。2. 如您所料，cut 行动只适用于 <input> 或 <textarea> 元素。

Mussum ipsum cacilds…

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>
 
<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

第三种使用方法：从属性复制文本

事实上，您甚至不需要另一个元素来复制它的内容。你可以只包括一个 data-clipboard-text 属性在触发器元素中。

<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>```