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
相关推荐
学习笔记10123 分钟前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-194325 分钟前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧1 小时前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台1 小时前
海龟交易系统R
前端·人工智能·r语言
歪歪1001 小时前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
Captaincc2 小时前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员
程序员杨工2 小时前
【原创】SpringBoot3+Vue3客户管理系统
vue.js·springboot
吃饺子不吃馅3 小时前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学
theOtherSky3 小时前
element+vue3 table上下左右键切换input和select
javascript·vue.js·elementui·1024程序员节