vue 实现点击复制 代码

vue 实现点击复制功能

使用Vue实现点击复制功能可以通过原生JavaScript的document.execCommand或现代的Clipboard API。以下是几种常见实现方式：

使用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)
    alert('复制成功')
  }
}

使用Clipboard API（现代浏览器推荐）

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

封装为Vue指令

可以创建一个全局指令方便复用：

Vue.directive('copy', {
  bind(el, binding) {
    el.addEventListener('click', () => {
      const text = binding.value
      navigator.clipboard.writeText(text).then(() => {
        alert('复制成功')
      }).catch(err => {
        console.error('复制失败:', err)
      })
    })
  }
})

使用方式：

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

使用第三方库

安装clipboard库：

npm install clipboard --save

组件中使用：

import Clipboard from 'clipboard'

methods: {
  initClipboard() {
    const clipboard = new Clipboard('.copy-btn', {
      text: () => this.copyText
    })
    clipboard.on('success', () => {
      alert('复制成功')
    })
    clipboard.on('error', () => {
      alert('复制失败')
    })
  }
}

注意事项

Clipboard API需要在安全上下文(HTTPS或localhost)中工作，否则可能无法使用。对于不支持Clipboard API的浏览器，需要回退到document.execCommand方法。

复制操作通常需要用户交互触发，某些浏览器可能会阻止脚本自动执行复制操作。