vue实现双击复制

Vue 实现双击复制功能

在 Vue 中实现双击复制功能可以通过以下步骤完成，结合原生 JavaScript 的 document.execCommand 或现代的 Clipboard API。

使用 document.execCommand 方法

创建一个自定义指令或方法，监听双击事件并执行复制操作。

// 自定义指令方式
Vue.directive('dblclick-copy', {
  bind(el, binding) {
    el.addEventListener('dblclick', () => {
      const range = document.createRange()
      range.selectNode(el)
      window.getSelection().removeAllRanges()
      window.getSelection().addRange(range)
      document.execCommand('copy')
      window.getSelection().removeAllRanges()
      alert('复制成功')
    })
  }
})

模板中使用指令：

<div v-dblclick-copy>双击复制这段文字</div>

使用 Clipboard API

现代浏览器推荐使用 Clipboard API，更安全且支持异步操作。

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

模板中绑定事件：

<div @dblclick="handleDblClick('要复制的文本')">双击复制</div>

封装为复用组件

创建一个可复用的双击复制组件，提升代码复用性。

// DoubleClickCopy.vue
<template>
  <div @dblclick="copyText">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: ['text'],
  methods: {
    copyText() {
      navigator.clipboard.writeText(this.text)
        .then(() => this.$emit('copied'))
        .catch(err => this.$emit('error', err))
    }
  }
}
</script>

使用组件：

<double-click-copy text="复制的文本" @copied="handleCopied">
  双击复制这段文字
</double-click-copy>

注意事项

• Clipboard API 需要 HTTPS 环境或本地开发环境（localhost）。
• 旧版浏览器需降级使用 document.execCommand。
• 可结合 Tooltip 提示用户操作成功。