vue实现点击文字复制

实现点击文字复制的Vue方法

在Vue中实现点击文字复制功能，可以通过以下两种常见方式完成：

方法一：使用原生JavaScript的document.execCommand

<template>
  <div>
    <p @click="copyText">点击复制这段文字</p>
  </div>
</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>
  <div>
    <p @click="copyTextModern">点击复制这段文字</p>
  </div>
</template>

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

注意事项

Clipboard API方法更现代且推荐使用，但需要注意浏览器兼容性。对于不支持Clipboard API的旧浏览器，可以回退到方法一。

可以创建一个可复用的指令或组件来封装此功能，便于在项目中多处使用。例如创建一个v-copy指令：

Vue.directive('copy', {
  bind(el, binding) {
    el.addEventListener('click', () => {
      const text = binding.value || el.textContent;
      navigator.clipboard.writeText(text).then(() => {
        // 可添加反馈提示
      });
    });
    el.style.cursor = 'pointer';
  }
});

使用时：

<p v-copy="'要复制的文本'">点击复制</p>