vue3复制到剪切板多种实现

Vue 3 想要实现复制文本到剪贴板的功能，我们一般可以使用v-copy的自定义指令或者主动调用方法进行复制

---

1. 使用 @vueuse/core 插件（推荐）

📌 特点：

• 轻量级，不依赖额外插件
• 支持 Vue 3 组合式 API
• 支持 useClipboard 直接操作剪贴板

安装

pnpm add @vueuse/core

使用

<template>
  <div>
    <input v-model="text" placeholder="输入要复制的文本" />
    <button @click="copy">复制</button>
    <p v-if="copied">✅ 复制成功！</p>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useClipboard } from "@vueuse/core";

const text = ref("Hello, Vue!");
const { copy, copied } = useClipboard({ source: text });
</script>

📖 VueUse 文档：useClipboard

---

2. 使用 vue-clipboard3 插件

📌 特点：

• 专门为 Vue 3 设计的剪贴板插件
• 支持 v-copy 指令
• 适用于选中文本并复制

安装

pnpm add vue-clipboard3

使用

<template>
  <div>
    <p ref="textRef">这是要复制的文本</p>
    <button @click="copyText">复制</button>
    <p v-if="copied">✅ 复制成功！</p>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useClipboard } from "vue-clipboard3";

const { copy, copied } = useClipboard();
const textRef = ref(null);

const copyText = async () => {
  try {
    await copy(textRef.value.innerText);
    alert("复制成功！");
  } catch (e) {
    alert("复制失败：" + e);
  }
};
</script>

📖 Vue-Clipboard3 文档：GitHub

---

3. 使用 v-clipboard 插件（支持 v-copy 指令）

📌 特点：

• 直接使用 v-copy 指令
• 适用于 Vue 3

安装

pnpm add v-clipboard

使用

<template>
  <div>
    <p v-copy="text">点击复制</p>
    <button v-copy="text">复制按钮</button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { createApp } from "vue";
import VClipboard from "v-clipboard";

const text = ref("Hello, Vue!");

const app = createApp({});
app.use(VClipboard);
</script>

📖 V-Clipboard 文档：GitHub

---

4. 使用原生 navigator.clipboard

📌 特点：

• 无需安装插件
• 纯 JavaScript API
• 兼容性较好

使用

<template>
  <div>
    <input v-model="text" />
    <button @click="copyText">复制</button>
    <p v-if="copied">✅ 复制成功！</p>
  </div>
</template>

<script setup>
import { ref } from "vue";

const text = ref("Hello, Vue!");
const copied = ref(false);

const copyText = async () => {
  try {
    await navigator.clipboard.writeText(text.value);
    copied.value = true;
    setTimeout(() => (copied.value = false), 2000);
  } catch (err) {
    console.error("复制失败", err);
  }
};
</script>

---

5. 总结

方法	适用场景	适合程度
VueUse useClipboard	轻量级，推荐	⭐⭐⭐⭐⭐
Vue-Clipboard3	支持 ref 选中文本复制	⭐⭐⭐⭐
V-Clipboard	支持 v-copy 指令	⭐⭐⭐⭐
原生 navigator.clipboard	无需额外插件	⭐⭐⭐

推荐

• 最简单方案 👉 useClipboard（VueUse）
• 想用 v-copy 指令 👉 v-clipboard
• 想复制选中文本 👉 vue-clipboard3
• 不想安装插件 👉 navigator.clipboard