clipboard.js - 复制到剪贴板

1. 介绍

复制内容到剪贴板

2. 使用

安装：

npm i clipboard
# "clipboard": "^2.0.11",

示例：

<template>
  <div class="box">
    <input v-model="content" />
    <button ref="triggerRef" :data-clipboard-text="content">复制</button>
  </div>
</template>
<script>
import ClipboardJS from "clipboard";

export default {
  mounted() {
    this.clipboard = new ClipboardJS(this.$refs.triggerRef);

    this.clipboard.on("success", (e) => {
      console.info("Action:", e.action);
      console.info("Text:", e.text);
      console.info("Trigger:", e.trigger);

      alert(`${this.content}, 拷贝成功`);
    });

    this.clipboard.on("error", (e) => {
      console.error("Action:", e.action);
      console.error("Trigger:", e.trigger);
    });
  },

  beforeUnmount() {
    this.clipboard.destroy();
  },

  data() {
    return {
      content: "测试内容",
    };
  },

};
</script>

3. 参考

• clipboard.js (opens new window)