vue3实现复制到剪切板

Vue 3 想要实现复制文本到剪贴板的功能,可以使用以下几种:


1. 使用 @vueuse/core(推荐)

📌 特点

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

安装

sh 复制代码
pnpm add @vueuse/core

使用

vue 复制代码
<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 指令
  • 适用于选中文本并复制

安装

sh 复制代码
pnpm add vue-clipboard3

使用

vue 复制代码
<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

安装

sh 复制代码
pnpm add v-clipboard

使用

vue 复制代码
<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


📌 特点

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

使用

vue 复制代码
<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
相关推荐
haaaaaaarry6 分钟前
Element Plus常见基础组件(一)
java·前端·javascript·vue.js
qingyingWin20 分钟前
原生微信小程序研发,如何对图片进行统一管理?
前端·微信小程序
不懂英语的程序猿30 分钟前
【JEECG】JVxeTable表格拖拽排序功能
前端·后端
拾光拾趣录36 分钟前
前端灵魂拷问:从URL到Redux,17个常见问题
前端·面试
萌萌哒草头将军43 分钟前
Prisma ORM 又双叒叕发布新版本了!🚀🚀🚀
前端·javascript·node.js
mldong1 小时前
推荐一款超高颜值的后台管理模板!Art-Design-Pro!开源!免费!
前端·vue.js·架构
草字1 小时前
uniapp 如果进入页面输入框自动聚焦,此时快速返回页面或者跳转到下一个页面,输入法顶上来的页面出现半屏的黑屏问题。
java·前端·uni-app
程序视点2 小时前
Wise Duplicate Finder 重复文件查找工具 - 永久免费专业版文件去重工具
前端·windows
一点一木2 小时前
🚀 2025 年 07 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
脑袋大大的3 小时前
uni-app x开发避坑指南:拯救被卡顿的UI线程!
开发语言·前端·javascript·vue.js·ui·uni-app·uts