当前位置：首页 > VUE

vue实现文字复制

2026-01-14 06:37:16VUE

Vue 中实现文字复制的几种方法

使用 `document.execCommand`

通过调用浏览器的 execCommand 方法实现复制功能。该方法在现代浏览器中仍可用，但逐渐被新的 Clipboard 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 是现代浏览器推荐的方式，更加安全和灵活。需要检查浏览器兼容性。

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

使用第三方库

可以使用 clipboard.js 等第三方库简化实现，适合复杂场景。

安装库：

npm install clipboard --save

在 Vue 中使用：

import Clipboard from 'clipboard'

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

封装为指令

将复制功能封装为 Vue 指令，便于复用。

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

使用方式：

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

兼容性处理

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

methods: {
  copyText(text) {
    if (navigator.clipboard) {
      navigator.clipboard.writeText(text)
        .then(() => alert('复制成功'))
        .catch(err => console.error('复制失败:', err))
    } else {
      const textarea = document.createElement('textarea')
      textarea.value = text
      document.body.appendChild(textarea)
      textarea.select()
      document.execCommand('copy')
      document.body.removeChild(textarea)
      alert('复制成功')
    }
  }
}

以上方法可以根据项目需求选择使用。现代浏览器推荐优先使用 Clipboard API，需要兼容旧浏览器时可结合 execCommand 实现。

vue实现文字复制