vue实现复制功能

使用 Clipboard API 实现复制

Vue 中可以通过调用浏览器的 Clipboard API 实现复制功能。现代浏览器支持 navigator.clipboard.writeText() 方法，将指定文本写入剪贴板。

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

兼容旧浏览器的 document.execCommand

对于不支持 Clipboard API 的旧浏览器，可以使用 document.execCommand('copy') 方法。需要先创建一个临时的 textarea 元素并选中文本。

methods: {
  copyToClipboard(text) {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();

    try {
      const successful = document.execCommand('copy');
      if (successful) {
        alert('复制成功');
      } else {
        throw new Error('复制命令执行失败');
      }
    } catch (err) {
      console.error('复制失败:', err);
    }

    document.body.removeChild(textarea);
  }
}

使用第三方库 vue-clipboard2

对于更简单的实现，可以安装 vue-clipboard2 库。该库封装了复制功能并提供 Vue 指令和组件支持。

安装库：

npm install vue-clipboard2

在 Vue 中使用：

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

Vue.use(VueClipboard);

// 在组件中使用
methods: {
  handleCopy() {
    this.$copyText('要复制的文本').then(() => {
      alert('复制成功');
    }, (err) => {
      console.error('复制失败:', err);
    });
  }
}

使用指令方式复制

vue-clipboard2 还支持指令方式，可以直接在模板中使用 v-clipboard 指令。

<button v-clipboard:copy="text" v-clipboard:success="onCopySuccess">复制</button>

处理移动端兼容性

移动端浏览器可能对复制操作有更多限制，特别是在某些 WebView 环境中。可以结合上述方法并添加适当的用户反馈。

methods: {
  copyToClipboard(text) {
    if (navigator.clipboard) {
      return navigator.clipboard.writeText(text);
    } else {
      return new Promise((resolve, reject) => {
        try {
          const textarea = document.createElement('textarea');
          textarea.value = text;
          document.body.appendChild(textarea);
          textarea.select();
          document.execCommand('copy');
          document.body.removeChild(textarea);
          resolve();
        } catch (err) {
          reject(err);
        }
      });
    }
  }
}

添加复制反馈

为了提高用户体验，可以在复制成功或失败时显示提示信息。可以使用 Toast 组件或简单的 alert。

methods: {
  async copyWithFeedback(text) {
    try {
      await this.copyToClipboard(text);
      this.$toast.success('复制成功');
    } catch (err) {
      this.$toast.error('复制失败');
    }
  }
}