vue 实现复制功能

Vue 实现复制功能的几种方法

使用 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)
    }
  }
}

使用第三方库 clipboard.js

安装：

npm install clipboard --save

组件中使用：

import Clipboard from 'clipboard'

export default {
  mounted() {
    const clipboard = new Clipboard('.copy-btn')
    clipboard.on('success', e => {
      alert('复制成功')
      e.clearSelection()
    })
    clipboard.on('error', e => {
      console.error('复制失败')
    })
  }
}

模板：

<button class="copy-btn" :data-clipboard-text="textToCopy">复制</button>

封装为可复用的指令

// 注册全局指令
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="textToCopy">复制</button>

注意事项

• 现代 Clipboard API 需要 HTTPS 环境或在 localhost 下工作
• 某些浏览器可能需要用户先触发点击事件才允许访问剪贴板
• 考虑添加复制成功/失败的反馈提示
• 对于移动端兼容性需要额外测试