当前位置：首页 > VUE

vue实现双击复制

2026-02-18 12:34:49VUE

实现双击复制功能的步骤

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

方法一：使用document.execCommand（兼容旧浏览器）

vue实现双击复制

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

<script>
export default {
  methods: {
    handleDoubleClick() {
      const range = document.createRange();
      range.selectNode(document.querySelector('div'));
      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() {
      try {
        await navigator.clipboard.writeText(this.$el.textContent);
        alert('复制成功');
      } catch (err) {
        console.error('复制失败:', err);
      }
    }
  }
}
</script>

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

vue实现双击复制

安装库：

npm install vue-clipboard2

使用示例：

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

<script>
import VueClipboard from 'vue-clipboard2'

export default {
  methods: {
    copy() {
      this.$copyText(this.$el.textContent).then(
        () => alert('复制成功'),
        () => alert('复制失败')
      )
    }
  }
}
</script>