VUE3 实现文本复制功能

npm install clipboard --save

<template>
  <div>
    <p>{{ copyText }}</p>
    <button ref="copyButton">复制文本</button>
    <p v-if="copySuccess">复制成功！</p>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import ClipboardJS from 'clipboard';

const copyText = '这是需要复制的文本内容。';
const copyButton = ref(null);
const copySuccess = ref(false);

onMounted(() => {
  const clipboard = new ClipboardJS(copyButton.value, {
    text: () => copyText
  });

  clipboard.on('success', () => {
    copySuccess.value = true;
    setTimeout(() => {
      copySuccess.value = false;
    }, 3000);
  });

  clipboard.on('error', (e) => {
    console.error('复制失败:', e);
  });

  onUnmounted(() => {
    clipboard.destroy();
  });
});
</script>

<style scoped>
button {
  margin-top: 10px;
}
</style>

在这个示例中，我们使用 clipboard.js 来实现复制功能。在组件挂载时，创建一个 ClipboardJS 实例，并绑定到按钮上。当复制成功或失败时，分别处理相应的事件。在组件卸载时，销毁 ClipboardJS 实例以避免内存泄漏。