vue实现点击复制

Vue 实现点击复制功能

使用 Clipboard API

现代浏览器提供了 Clipboard API，可以直接调用实现复制功能。Vue 中可以通过以下方式实现：

methods: {
  copyToClipboard(text) {
    navigator.clipboard.writeText(text)
      .then(() => {
        alert('复制成功');
      })
      .catch(err => {
        console.error('复制失败:', err);
      });
  }
}

在模板中绑定点击事件：

<button @click="copyToClipboard('要复制的文本')">点击复制</button>

使用 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 库简化实现：

安装：

npm install clipboard --save

使用：

import Clipboard from 'clipboard';

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

模板：

<button class="copy-btn" data-clipboard-text="要复制的文本">点击复制</button>

封装为指令

将复制功能封装为 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 API 是最新的标准方法，推荐在支持的浏览器中使用。