当前位置：首页 > VUE

vue点击按钮实现复制

2026-02-24 02:14:31VUE

实现点击按钮复制功能

在Vue中实现点击按钮复制文本功能，可以通过以下两种方式实现：

使用原生document.execCommand方法（兼容旧浏览器）

<template>
  <button @click="copyText">复制文本</button>
</template>

<script>
export default {
  methods: {
    copyText() {
      const textToCopy = '要复制的文本内容'
      const textArea = document.createElement('textarea')
      textArea.value = textToCopy
      document.body.appendChild(textArea)
      textArea.select()
      document.execCommand('copy')
      document.body.removeChild(textArea)
      alert('文本已复制')
    }
  }
}
</script>

使用现代Clipboard API（推荐）

<template>
  <button @click="copyText">复制文本</button>
</template>

<script>
export default {
  methods: {
    async copyText() {
      try {
        await navigator.clipboard.writeText('要复制的文本内容')
        alert('文本已复制')
      } catch (err) {
        console.error('复制失败:', err)
      }
    }
  }
}
</script>

封装为可复用的指令

可以将复制功能封装为Vue指令，方便在多个地方使用：

// 在main.js或单独文件中
Vue.directive('copy', {
  bind(el, binding) {
    el.addEventListener('click', () => {
      const text = binding.value
      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('复制成功')
      }
    })
  }
})

使用方式：

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

使用第三方库

如果需要更复杂的功能，可以考虑使用第三方库如vue-clipboard2：

安装：

npm install vue-clipboard2

使用：

import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

模板中使用：

vue点击按钮实现复制

<button v-clipboard:copy="'要复制的文本内容'" 
        v-clipboard:success="onCopySuccess"
        v-clipboard:error="onCopyError">
  复制
</button>

<script>
export default {
  methods: {
    onCopySuccess() {
      alert('复制成功')
    },
    onCopyError() {
      alert('复制失败')
    }
  }
}
</script>