vue实现文本复制

Vue 实现文本复制的方法

在 Vue 项目中实现文本复制功能，可以通过以下几种方式实现：

使用 document.execCommand

这种方法兼容性较好，但已逐渐被现代 API 取代。

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，更安全且支持 Promise。

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

使用第三方库

可以使用 clipboard 等第三方库简化操作。

安装：

npm install clipboard --save

使用：

import Clipboard from 'clipboard'

methods: {
  initCopy() {
    const clipboard = new Clipboard('.copy-btn', {
      text: () => '要复制的文本'
    })
    clipboard.on('success', () => {
      alert('复制成功')
      clipboard.destroy()
    })
    clipboard.on('error', () => {
      alert('复制失败')
      clipboard.destroy()
    })
  }
},
mounted() {
  this.initCopy()
}

注意事项

• 使用 Clipboard API 时需要注意 HTTPS 环境限制
• 移动端可能需要用户手势触发
• 提供适当的反馈提示提升用户体验