目录
一、介绍和安装
（1）介绍
（2）安装
二、示例
（1）示例效果演示
（2）示例视频演示
（3）示例代码
一、介绍和安装
（1）介绍
copy-to-clipboard 是一个轻量级的 JavaScript 库，用于将文本内容复制到剪贴板。它提供了一种简单且跨浏览器的方式来实现复制到剪贴板的功能，避免了直接操作 DOM 和处理不同浏览器兼容性问题的复杂性。
（2）安装
npm install copy-to-clipboard --save二、示例
（1）示例效果演示
（2）示例视频演示
copy-to-clipboard实现复制粘贴_哔哩哔哩_bilibilicopy-to-clipboard实现复制粘贴, 视频播放量 72、弹幕量 0、点赞数 2、投硬币枚数 0、收藏人数 1、转发人数 0, 视频作者 刚入门的程序员, 作者简介 软件订做，源码获取个人v：wx_grmdcxy，相关视频：【从0带做】房屋租赁系统，基于Springboot3+Vue3的贝贝租房网，租房平台，可用于毕业设计、课程设计、实习项目，7.求数列中的最大值和最小值，【Java面试】字节一面：Sentinel 采用的是什么限流算法？，【PR教程】2025最流行的100个转场思路，让你的视频衔接比德芙更丝滑，方法+实操全方位讲解，学PR转场这一套就够了！建议收藏！！，【全24集】最全网络设备从工作原理到基本配置教程！通俗易懂，2025最新版，学完即可就业！交换机/路由器/防火墙/无线设备，9.理解合并排序，搞不懂二次线及附件？这份超全介绍来帮你，【科普】游戏开发人员都该掌握的图形基础知识｜什么是Mipmap？，【小白讲PS】OHHH~这个融球技法也太哇塞了吧！，10.合并排序代码讲解
https://www.bilibili.com/video/BV1GLe9zrEck/
（3）示例代码
<template><div class="copyboard-container"><h1>简易剪贴板</h1><!-- 主要复制区域 --><div class="copy-section"><div class="button-group"><button class="copy-btn" @click="copyText" :disabled="!textToCopy.trim()">{{ copyStatus }}</button><button class="paste-btn" @click="pasteText">粘贴文本</button><button class="clear-btn" @click="clearText" :disabled="!textToCopy.trim()">清空</button></div><label for="textToCopy">输入要复制的文本：</label><textareaid="textToCopy"v-model="textToCopy"placeholder="在此输入要复制的文本..."rows="6"></textarea></div></div>
</template><script setup>
import { ref } from "vue";//npm install copy-to-clipboard 安装
import copy from "copy-to-clipboard";// 状态变量
const textToCopy = ref("");
const copyStatus = ref("复制到剪贴板");// 复制文本到剪贴板
const copyText = () => {if (!textToCopy.value.trim()) return;try {const success = copy(textToCopy.value);if (success) {// 更新状态提示copyStatus.value = "复制成功！";setTimeout(() => {copyStatus.value = "复制到剪贴板";}, 2000);} else {copyStatus.value = "复制失败";setTimeout(() => {copyStatus.value = "复制到剪贴板";}, 2000);}} catch (error) {console.error("复制操作失败:", error);copyStatus.value = "复制失败";setTimeout(() => {copyStatus.value = "复制到剪贴板";}, 2000);}
};// 清空输入框
const clearText = () => {textToCopy.value = "";
};// 在script setup部分添加粘贴文本功能
// 首先添加pastedText状态变量
const pastedText = ref("");// 然后添加粘贴文本函数
const pasteText = async () => {try {// 检查浏览器环境是否支持现代的 Clipboard API// 1. 检查 navigator 对象是否存在（确保是浏览器环境）// 2. 检查 navigator.clipboard 对象是否存在（Clipboard API 的主对象）// 3. 检查 navigator.clipboard.readText 是一个函数（ specifically检查读取文本的功能）if (navigator &&navigator.clipboard &&typeof navigator.clipboard.readText === "function") {//读取剪贴板中的纯文本内容const text = await navigator.clipboard.readText();pastedText.value = text;textToCopy.value = text;} else {// 降级方案：提示用户使用Ctrl+Valert("剪贴板API不可用，请使用键盘快捷键Ctrl+V粘贴");}} catch (error) {console.error("粘贴失败:", error);alert("粘贴失败，请手动使用Ctrl+V粘贴");}
};
</script><style scoped>
.copyboard-container {max-width: 600px;margin: 0 auto;padding: 20px;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,Cantarell, sans-serif;
}h1 {text-align: center;color: #333;margin-bottom: 30px;
}.copy-section {background: #f9f9f9;padding: 20px;border-radius: 8px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}label {display: block;margin-bottom: 8px;font-weight: 500;color: #555;
}textarea {width: 100%;padding: 12px;border: 1px solid #ddd;border-radius: 4px;font-size: 14px;font-family: inherit;resize: vertical;box-sizing: border-box;
}textarea:focus {outline: none;border-color: #4a90e2;box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}.button-group {display: flex;width: 100%;justify-content: flex-end;gap: 10px;margin-top: 15px;flex-wrap: wrap;
}button {padding: 10px 16px;border: none;border-radius: 4px;font-size: 14px;cursor: pointer;transition: all 0.2s ease;
}.copy-btn {background-color: #4a90e2;color: white;
}.copy-btn:hover:not(:disabled) {background-color: #357abd;
}.clear-btn {background-color: #f0ad4e;color: white;
}.clear-btn:hover:not(:disabled) {background-color: #ec971f;
}button:disabled {background-color: #ccc;cursor: not-allowed;opacity: 0.6;
}.paste-btn {background-color: #5cb85c;color: white;
}.paste-btn:hover {background-color: #449d44;
}
</style>
))
