vue实现双击复制

Vue 实现双击复制功能

在 Vue 中实现双击复制功能可以通过以下方法完成：

方法一：使用 document.execCommand

<template>
  <div @dblclick="copyText">双击复制这段文字</div>
</template>

<script>
export default {
  methods: {
    copyText(event) {
      const range = document.createRange();
      range.selectNode(event.target);
      window.getSelection().removeAllRanges();
      window.getSelection().addRange(range);
      document.execCommand('copy');
      window.getSelection().removeAllRanges();
      alert('已复制到剪贴板');
    }
  }
}
</script>

方法二：使用 Clipboard API

<template>
  <div @dblclick="copyText">双击复制这段文字</div>
</template>

<script>
export default {
  methods: {
    async copyText(event) {
      try {
        await navigator.clipboard.writeText(event.target.textContent);
        alert('已复制到剪贴板');
      } catch (err) {
        console.error('复制失败:', err);
      }
    }
  }
}
</script>

方法三：使用第三方库 vue-clipboard2

安装依赖：

npm install vue-clipboard2

使用示例：

<template>
  <div @dblclick="copyText">双击复制这段文字</div>
</template>

<script>
import VueClipboard from 'vue-clipboard2'

export default {
  methods: {
    copyText(event) {
      this.$copyText(event.target.textContent).then(() => {
        alert('已复制到剪贴板');
      }, () => {
        console.error('复制失败');
      })
    }
  }
}
</script>

注意事项

• Clipboard API 需要 HTTPS 环境或在 localhost 下工作
• 某些浏览器可能需要用户先与页面交互才能访问剪贴板
• 考虑添加视觉反馈（如 Toast）替代 alert
• 移动端可能需要调整触摸事件处理

以上方法可根据项目需求和技术栈选择最适合的实现方式。