当前位置：首页 > VUE

vue点击实现复制内容

2026-01-21 11:38:07VUE

使用 `document.execCommand` 方法

在 Vue 中可以通过 document.execCommand 实现复制功能。创建一个方法，动态创建 textarea 元素并选中内容，执行复制命令后移除元素。

<template>
  <button @click="copyText('要复制的文本')">点击复制</button>
</template>

<script>
export default {
  methods: {
    copyText(text) {
      const textarea = document.createElement('textarea');
      textarea.value = text;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
      alert('复制成功');
    }
  }
};
</script>

使用 Clipboard API

现代浏览器支持 Clipboard API，提供更简洁的复制方式。通过 navigator.clipboard.writeText 实现异步复制。

<template>
  <button @click="copyText('要复制的文本')">点击复制</button>
</template>

<script>
export default {
  methods: {
    async copyText(text) {
      try {
        await navigator.clipboard.writeText(text);
        alert('复制成功');
      } catch (err) {
        console.error('复制失败:', err);
      }
    }
  }
};
</script>

使用第三方库 `vue-clipboard3`

对于兼容性要求较高的场景，可以使用 vue-clipboard3 库。安装后通过 useClipboard 方法快速实现复制。

安装库：

npm install vue-clipboard3

代码示例：

<template>
  <button @click="copy('要复制的文本')">点击复制</button>
</template>

<script>
import { useClipboard } from 'vue-clipboard3';

export default {
  setup() {
    const { clipboard } = useClipboard();

    const copy = async (text) => {
      try {
        await clipboard.writeText(text);
        alert('复制成功');
      } catch (err) {
        console.error('复制失败:', err);
      }
    };

    return { copy };
  }
};
</script>

兼容性处理

对于不支持 Clipboard API 的旧浏览器，可以结合两种方法。先尝试 Clipboard API，失败时回退到 execCommand。

<script>
export default {
  methods: {
    async copyText(text) {
      try {
        if (navigator.clipboard) {
          await navigator.clipboard.writeText(text);
        } else {
          const textarea = document.createElement('textarea');
          textarea.value = text;
          document.body.appendChild(textarea);
          textarea.select();
          document.execCommand('copy');
          document.body.removeChild(textarea);
        }
        alert('复制成功');
      } catch (err) {
        console.error('复制失败:', err);
      }
    }
  }
};
</script>