vue中实现复制功能

使用 document.execCommand 方法（兼容旧浏览器）

在 Vue 中可以通过封装 document.execCommand 实现复制功能。创建一个方法，动态创建 textarea 元素，设置需要复制的文本，执行复制命令后移除元素。

methods: {
  copyText(text) {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
    alert('复制成功');
  }
}

使用 Clipboard API（现代浏览器推荐）

Clipboard API 是更现代的方案，支持异步操作和更细粒度的控制。通过 navigator.clipboard.writeText 实现复制，需注意浏览器兼容性和 HTTPS 环境限制。

methods: {
  async copyText(text) {
    try {
      await navigator.clipboard.writeText(text);
      alert('复制成功');
    } catch (err) {
      console.error('复制失败:', err);
    }
  }
}

封装为指令（全局复用）

将复制功能封装为 Vue 自定义指令，便于全局复用。指令绑定元素时自动添加点击事件，通过 binding.value 获取需要复制的文本。

Vue.directive('copy', {
  bind(el, binding) {
    el.addEventListener('click', async () => {
      try {
        await navigator.clipboard.writeText(binding.value);
        alert('复制成功');
      } catch (err) {
        console.error('复制失败:', err);
      }
    });
  }
});

使用方式：

<button v-copy="'需要复制的文本'">点击复制</button>

使用第三方库（如 clipboard）

安装 clipboard 库：

npm install clipboard --save

在组件中引入并初始化：

import Clipboard from 'clipboard';

export default {
  mounted() {
    new Clipboard('.copy-btn');
  }
}

模板中使用 data-clipboard-text 属性指定复制内容：

<button class="copy-btn" data-clipboard-text="需要复制的文本">复制</button>

处理复制反馈（提升用户体验）

添加复制成功或失败的反馈提示，例如使用 Toast 或修改按钮状态。以下示例结合 Clipboard API 和状态反馈：

methods: {
  async copyText(text) {
    try {
      await navigator.clipboard.writeText(text);
      this.copyStatus = 'success';
      setTimeout(() => this.copyStatus = '', 2000);
    } catch (err) {
      this.copyStatus = 'error';
    }
  }
}

模板中根据状态显示反馈：

<button @click="copyText('示例文本')">
  {{ copyStatus === 'success' ? '已复制!' : '点击复制' }}
</button>