vue3 clipboard

// 使用 Vue 3 和 clipboard 实现复制功能的示例代码

<template>
  <div>
    <input v-model="textToCopy" placeholder="输入要复制的文本" />
    <button @click="copyText">复制文本</button>
    <p v-if="copied">已复制到剪贴板！</p>
  </div>
</template>

<script>
import { ref } from 'vue';
import ClipboardJS from 'clipboard';

export default {
  setup() {
    const textToCopy = ref('');
    const copied = ref(false);

    const copyText = () => {
      const el = document.createElement('textarea');
      el.value = textToCopy.value;
      document.body.appendChild(el);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);
      copied.value = true;

      // 使用 ClipboardJS 的方法
      // const clipboard = new ClipboardJS('.btn');
      // clipboard.on('success', function(e) {
      //   console.log('Action:', e.action);
      //   console.log('Text:', e.text);
      //   console.log('Trigger:', e.trigger);
      //   e.clearSelection();
      // });

      setTimeout(() => {
        copied.value = false;
      }, 2000);
    };

    return {
      textToCopy,
      copied,
      copyText,
    };
  },
};
</script>

<style scoped>
/* 样式可以根据需要自行添加 */
</style>

解释说明：

1. 模板部分 (<template>):

   • 包含一个 input 元素用于输入要复制的文本。
   • 包含一个 button 按钮，点击时触发 copyText 方法。
   • 包含一个 p 元素，在文本成功复制后显示提示信息。

2. 脚本部分 (<script>):

   • 使用 ref 创建响应式变量 textToCopy 和 copied。
   • copyText 方法创建一个临时的 textarea 元素，将文本粘贴进去并调用 document.execCommand('copy') 来执行复制操作。
   • 复制成功后，设置 copied 为 true，并在 2 秒后重置为 false。
   • 注释掉了使用 ClipboardJS 的部分，你可以根据需要启用它。

3. 样式部分 (<style scoped>):

   • 可以根据需要自行添加样式。

这个示例展示了如何在 Vue 3 中实现简单的复制文本到剪贴板的功能。