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
相关推荐
李鸿耀25 分钟前
主题换肤指南:设计到开发的完整实践
前端
带娃的IT创业者5 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
非凡ghost6 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_11066 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
洛可可白7 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
学习同学7 小时前
从0到1制作一个go语言游戏服务器(二)web服务搭建
服务器·前端·golang
-D调定义之崽崽8 小时前
【初学】调试 MCP Server
前端·mcp
四月_h8 小时前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate8 小时前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
正义的大古9 小时前
OpenLayers地图交互 -- 章节十八:拖拽旋转和缩放交互详解
javascript·vue.js·openlayers