在 Vue 3 中实现复制内容时追加固定信息

今天在工作中遇到了一个需求：用户复制页面中的某段文本时，需要在复制的内容后自动追加固定的作者出处信息。这个功能看起来简单，但涉及到浏览器的剪贴板事件处理和 Vue 3 的生命周期管理。于是，我决定记录一下实现过程，方便以后回顾。

需求分析

功能目标：
- 页面中展示一段文本。
- 用户复制这段文本时，自动在复制的内容后追加固定的作者出处信息。
技术实现：
- 使用 Vue 3 的 <script setup> 语法和 TypeScript。
- 监听浏览器的 copy 事件。
- 在事件处理函数中修改剪贴板的内容。

实现步骤

1. 创建 Vue 3 项目

首先，我创建了一个 Vue 3 项目，并确保项目中已经配置了 TypeScript 支持。如果还没有项目，可以通过以下命令创建一个：

bash
npm create vue@latest

然后选择 TypeScript 作为语言支持。

2. 编写页面结构

在 App.vue 中，我编写了一个简单的页面结构，展示一段文本：

vue
<template>
  <div>
    <p ref="contentRef">
      这是一段示例文本，用户复制时会自动追加作者出处信息。
    </p>
  </div>
</template>

3. 监听复制事件

接下来，我需要监听浏览器的 copy 事件，并在事件处理函数中修改剪贴板的内容。具体实现如下：

typescript
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

// 定义要追加的固定内容
const fixedContent = '\n\n作者：某某某\n出处：某某网站';

// 获取段落元素的引用
const contentRef = ref<HTMLElement | null>(null);

// 监听复制事件
const handleCopy = (event: ClipboardEvent) => {
  if (!event.clipboardData) return;

  // 获取选中的文本
  const selectedText = window.getSelection()?.toString() || '';

  // 如果选中的文本来自目标段落，则追加固定内容
  if (contentRef.value?.contains(event.target as Node)) {
    event.preventDefault(); // 阻止默认复制行为
    event.clipboardData.setData('text/plain', selectedText + fixedContent);
  }
};

// 挂载时添加事件监听
onMounted(() => {
  document.addEventListener('copy', handleCopy);
});

// 卸载时移除事件监听
onUnmounted(() => {
  document.removeEventListener('copy', handleCopy);
});
</script>

4. 样式调整

为了让页面看起来更美观，我添加了一些简单的样式：

vue
<style scoped>
p {
  font-size: 16px;
  line-height: 1.5;
  margin: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>

5. 运行效果

完成代码后，我运行了项目，测试了复制功能。当用户复制段落中的文本时，剪贴板中的内容会自动追加固定的作者出处信息。例如，复制 这是一段示例文本，用户复制时会自动追加作者出处信息。 后，剪贴板中的内容会变为：


这是一段示例文本，用户复制时会自动追加作者出处信息。

作者：某某某
出处：某某网站

遇到的问题与解决

事件目标判断：
- 最初，我没有判断选中的文本是否来自目标段落，导致所有复制操作都会被修改。通过 contentRef.value?.contains(event.target as Node) 解决了这个问题。
剪贴板 API 兼容性：
- 某些旧版浏览器可能不支持 clipboardData API。为了兼容性，我添加了 if (!event.clipboardData) return; 的判断。
事件监听器的管理：
- 为了避免内存泄漏，我在 onUnmounted 钩子中移除了事件监听器。

通过这次实现，我学到了如何在 Vue 3 中监听和处理浏览器的剪贴板事件，并结合 TypeScript 实现了功能。虽然功能本身并不复杂，但涉及到的细节（如事件目标判断、剪贴板 API 兼容性等）让我对前端开发有了更深的理解。

未来，如果遇到类似的需求，我会考虑将这段逻辑封装成一个可复用的自定义 Hook，以便在项目中更方便地使用。

目录