copy-to-clipboard – 轻量级零依赖剪贴板操作库，一行代码搞定复制功能

前言

在现代 Web 开发中，复制文本到剪贴板是一个常见且重要的功能。无论是分享链接、复制代码片段，还是复制用户生成的内容，都需要一个可靠且易用的解决方案。copy-to-clipboard 是一个轻量级、无依赖的 JavaScript 库，专门用于处理剪贴板操作，为开发者提供了简单而强大的 API。

它是什么？

copy-to-clipboard 是一个纯 JavaScript 库，用于将文本内容复制到用户的剪贴板中。它支持现代浏览器和旧版浏览器，提供了统一的 API 来处理不同环境下的剪贴板操作。

主要特性

• 轻量级：无外部依赖，体积小巧
• 跨浏览器兼容：支持现代浏览器和 IE9+
• 简单易用：提供简洁的 API
• TypeScript 支持：完整的类型定义
• Promise 支持：支持异步操作
• 错误处理：完善的错误处理机制

安装方式

# npm
npm install copy-to-clipboard

# yarn
yarn add copy-to-clipboard

# pnpm
pnpm add copy-to-clipboard

快速上手

基础用法

import copy from "copy-to-clipboard";

// 复制文本到剪贴板
const success = copy("Hello, World!");

if (success) {
  console.log("复制成功！");
} else {
  console.log("复制失败！");
}

在 Vue 3 中使用

<template>
  <div>
    <button @click="copyText">复制文本</button>
    <p v-if="copyStatus">{{ copyStatus }}</p>
  </div>
</template>

<script setup>
import { ref } from "vue";
import copy from "copy-to-clipboard";

const copyStatus = ref("");

const copyText = () => {
  const text = "这是要复制的文本内容";
  const success = copy(text);

  if (success) {
    copyStatus.value = "复制成功！";
  } else {
    copyStatus.value = "复制失败，请手动复制";
  }

  // 3秒后清除状态
  setTimeout(() => {
    copyStatus.value = "";
  }, 3000);
};
</script>

在 React 中使用

import React, { useState } from "react";
import copy from "copy-to-clipboard";

function CopyButton() {
  const [status, setStatus] = useState("");

  const handleCopy = () => {
    const text = "这是要复制的文本内容";
    const success = copy(text);

    if (success) {
      setStatus("复制成功！");
    } else {
      setStatus("复制失败，请手动复制");
    }

    setTimeout(() => setStatus(""), 3000);
  };

  return (
    <div>
      <button onClick={handleCopy}>复制文本</button>
      {status && <p>{status}</p>}
    </div>
  );
}

export default CopyButton;

应用场景

分享链接

<template>
  <div class="share-section">
    <h3>分享这篇文章</h3>
    <div class="share-buttons">
      <button @click="copyLink" class="copy-btn">📋 复制链接</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import copy from "copy-to-clipboard";

const copyLink = () => {
  const url = window.location.href;
  const success = copy(url);

  if (success) {
    // 显示成功提示
    showToast("链接已复制到剪贴板！");
  } else {
    showToast("复制失败，请手动复制链接");
  }
};
</script>

代码片段复制

<template>
  <div class="code-block">
    <div class="code-header">
      <span class="language">JavaScript</span>
      <button @click="copyCode" class="copy-code-btn">
        {{ copied ? "已复制" : "复制代码" }}
      </button>
    </div>
    <pre><code>{{ code }}</code></pre>
  </div>
</template>

<script setup>
import { ref } from "vue";
import copy from "copy-to-clipboard";

const props = defineProps({
  code: String,
  language: String,
});

const copied = ref(false);

const copyCode = () => {
  const success = copy(props.code);

  if (success) {
    copied.value = true;
    setTimeout(() => {
      copied.value = false;
    }, 2000);
  }
};
</script>

表单数据复制

<template>
  <form @submit.prevent="handleSubmit">
    <div class="form-group">
      <label>用户名</label>
      <input v-model="form.username" type="text" />
      <button type="button" @click="copyField('username')">复制</button>
    </div>

    <div class="form-group">
      <label>邮箱</label>
      <input v-model="form.email" type="email" />
      <button type="button" @click="copyField('email')">复制</button>
    </div>

    <button type="submit">提交</button>
    <button type="button" @click="copyAllData">复制所有数据</button>
  </form>
</template>

<script setup>
import { reactive } from "vue";
import copy from "copy-to-clipboard";

const form = reactive({
  username: "",
  email: "",
});

const copyField = (field) => {
  const value = form[field];
  if (value) {
    copy(value);
    showToast(`${field} 已复制`);
  }
};

const copyAllData = () => {
  const dataString = JSON.stringify(form, null, 2);
  copy(dataString);
  showToast("所有数据已复制");
};
</script>

为什么选它？

轻量级设计

// 包大小对比
// copy-to-clipboard: ~1.2KB (gzipped)
// clipboard.js: ~3.2KB (gzipped)
// 原生 navigator.clipboard: 需要 HTTPS 和用户权限

无依赖

// 不需要额外的依赖
// 不依赖 jQuery、React、Vue 等框架
// 可以在任何 JavaScript 环境中使用

兼容性好

// 支持的浏览器
const supportedBrowsers = {
  Chrome: "4+",
  Firefox: "3.5+",
  Safari: "3.1+",
  Edge: "12+",
  IE: "9+",
};

简单易用

// 一行代码搞定
import copy from "copy-to-clipboard";
copy("Hello, World!");

总结

copy-to-clipboard 是现代 Web 开发中处理剪贴板操作的最佳选择之一，它简单、可靠、高效，能够满足大多数应用场景的需求。无论是简单的文本复制还是复杂的应用集成，它都能提供出色的解决方案。