vue实现复制功能

使用 Clipboard API 实现复制

Vue 中可以通过 Clipboard API 实现复制功能，这是现代浏览器提供的原生 API，不需要额外依赖。

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

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

对于需要兼容旧浏览器的项目，可以使用传统的 document.execCommand 方法。

methods: {
  copyToClipboard(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-clipboard2

vue-clipboard2 是一个专门为 Vue 设计的剪贴板插件，使用简单方便。

安装：

npm install vue-clipboard2

使用：

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

Vue.use(VueClipboard)

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

自定义指令实现复制功能

可以创建一个 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)
    })
  }
})

// 模板中使用
<button v-copy="'要复制的文本'">复制</button>

处理复制反馈

为了提高用户体验，通常需要给用户复制成功的反馈。

methods: {
  async copyWithFeedback(text) {
    try {
      await navigator.clipboard.writeText(text);
      this.$message.success('复制成功');
    } catch (err) {
      this.$message.error('复制失败');
      console.error(err);
    }
  }
}

兼容性处理

对于需要全面兼容的方案，可以结合多种方法实现。

methods: {
  copyText(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);
        }
      });
    }
  }
}