vue 实现复制粘贴

实现复制功能

使用 document.execCommand 方法实现复制文本到剪贴板。虽然该方法已废弃，但在多数浏览器中仍可用。

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 实现复制功能，需要获取用户权限。

async copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text)
    console.log('文本已复制到剪贴板')
  } catch (err) {
    console.error('复制失败:', err)
  }
}

实现粘贴功能

监听粘贴事件并获取剪贴板内容。

methods: {
  handlePaste(event) {
    const clipboardData = event.clipboardData || window.clipboardData
    const pastedText = clipboardData.getData('text')
    console.log('粘贴的内容:', pastedText)
    // 处理粘贴内容
  }
},
mounted() {
  document.addEventListener('paste', this.handlePaste)
},
beforeDestroy() {
  document.removeEventListener('paste', this.handlePaste)
}

使用第三方库

可以安装 clipboard 库简化操作。

npm install clipboard --save

import Clipboard from 'clipboard'

new Clipboard('.btn-copy', {
  text: function() {
    return '要复制的文本'
  }
})

处理权限问题

使用 Clipboard API 时可能遇到权限问题，需要确保在安全上下文(HTTPS)中运行，或通过用户手势触发。

<button @click="copyText">复制</button>

methods: {
  copyText() {
    navigator.clipboard.writeText('要复制的文本')
      .then(() => alert('复制成功'))
      .catch(err => console.error(err))
  }
}

兼容性处理

对于不支持 Clipboard API 的浏览器，可以回退到 execCommand 方法。

copyText(text) {
  if (navigator.clipboard) {
    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)
  }
}