vue实现文字复制

Vue 实现文字复制的几种方法

使用 Clipboard API

在 Vue 中可以通过调用浏览器的 Clipboard API 实现文字复制功能。该方法兼容现代浏览器，无需额外依赖。

methods: {
  copyToClipboard(text) {
    navigator.clipboard.writeText(text)
      .then(() => {
        console.log('复制成功');
      })
      .catch(err => {
        console.error('复制失败:', err);
      });
  }
}

使用 document.execCommand

对于需要兼容旧版浏览器的场景，可以使用 document.execCommand 方法。该方法已被废弃，但在部分场景下仍可使用。

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

使用第三方库

Vue 生态中有专门处理复制的库，如 vue-clipboard2，安装后可以快速实现复制功能。

安装依赖：

npm install vue-clipboard2

在组件中使用：

import Vue from 'vue';
import VueClipboard from 'vue-clipboard2';

Vue.use(VueClipboard);

methods: {
  handleCopy() {
    this.$copyText('要复制的文本').then(() => {
      console.log('复制成功');
    }, () => {
      console.log('复制失败');
    });
  }
}

自定义指令实现

通过 Vue 自定义指令可以封装复制的逻辑，方便在模板中直接使用。

Vue.directive('copy', {
  bind(el, binding) {
    el.addEventListener('click', () => {
      const textarea = document.createElement('textarea');
      textarea.value = binding.value;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
      console.log('复制成功');
    });
  }
});

模板中使用：

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

注意事项

• 使用 Clipboard API 时需要注意 HTTPS 环境限制，某些浏览器在非安全环境下可能无法使用
• 复制操作可能被浏览器拦截，需要用户主动触发（如点击事件）
• 移动端兼容性需要额外测试，部分 Android 浏览器可能支持不完善
• 可以提供复制成功或失败的反馈，提升用户体验