当前位置：首页 > VUE

vue如何实现复制文本

2026-01-23 15:58:05VUE

使用 `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);
  }
}

使用 Clipboard API（现代方式）

现代浏览器支持 Clipboard API，提供更安全和可靠的复制功能。通过 navigator.clipboard.writeText 方法实现文本复制，需注意该方法需要在安全上下文（如 HTTPS 或 localhost）中调用。

methods: {
  async copyText(text) {
    try {
      await navigator.clipboard.writeText(text);
      console.log('文本已复制');
    } catch (err) {
      console.error('复制失败:', err);
    }
  }
}

使用第三方库 `vue-clipboard2`

安装 vue-clipboard2 库可以更便捷地实现复制功能。安装后全局注册插件，通过指令或方法调用复制操作。

vue如何实现复制文本

npm install vue-clipboard2 --save

在 Vue 中注册插件：

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

Vue.use(VueClipboard);

通过指令使用：

vue如何实现复制文本

<button v-clipboard:copy="text">复制文本</button>

通过方法调用：

this.$clipboard.copy(text);

兼容性处理

对于不支持 Clipboard API 的旧浏览器，可以结合 document.execCommand 作为降级方案。检测 navigator.clipboard 是否存在，选择合适的方法。

methods: {
  async copyText(text) {
    if (navigator.clipboard) {
      await navigator.clipboard.writeText(text);
    } else {
      const textarea = document.createElement('textarea');
      textarea.value = text;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
    }
  }
}

反馈用户操作结果

复制操作完成后，建议通过提示（如 Toast 或 alert）告知用户操作是否成功，提升用户体验。

methods: {
  async copyText(text) {
    try {
      await navigator.clipboard.writeText(text);
      alert('复制成功！');
    } catch (err) {
      alert('复制失败，请手动复制');
    }
  }
}