vue实现双击复制

实现双击复制文本功能

方法一：使用document.execCommand

1. 监听元素的dblclick事件
2. 创建临时textarea元素保存文本
3. 执行document.execCommand('copy')

   
   <template>
   <p @dblclick="handleDblClick">{{text}}</p>
   </template>

export default { data() { return { text: '双击复制这段文字' } }, methods: { handleDblClick() { const textarea = document.createElement('textarea') textarea.value = this.text document.body.appendChild(textarea) textarea.select() document.execCommand('copy') document.body.removeChild(textarea) alert('已复制到剪贴板') } } } ```

方法二：使用Clipboard API

1. 检查浏览器是否支持navigator.clipboard
2. 调用writeText()方法

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

注意事项

• 需要在用户触发的事件中调用（如点击事件）
• HTTPS环境下Clipboard API才能正常工作
• 考虑添加视觉反馈代替alert

兼容性处理

methods: {
  async copyText(text) {
    if (navigator.clipboard) {
      return navigator.clipboard.writeText(text)
    } else {
      const textarea = document.createElement('textarea')
      textarea.value = text
      document.body.appendChild(textarea)
      textarea.select()
      try {
        return document.execCommand('copy')
      } finally {
        document.body.removeChild(textarea)
      }
    }
  }
}