当前位置：首页 > VUE

vue 实现点击复制代码

2026-02-23 07:49:15VUE

Vue 实现点击复制功能

使用 Clipboard API

现代浏览器提供了 Clipboard API，可以直接操作剪贴板内容。该方法无需额外依赖，兼容性良好。

<template>
  <button @click="copyText">复制文本</button>
</template>

<script>
export default {
  methods: {
    async copyText() {
      const textToCopy = '需要复制的文本内容';
      try {
        await navigator.clipboard.writeText(textToCopy);
        alert('复制成功');
      } catch (err) {
        console.error('复制失败:', err);
      }
    }
  }
};
</script>

使用 document.execCommand

对于不支持 Clipboard API 的旧版浏览器，可以使用传统的 document.execCommand 方法。

<template>
  <button @click="copyTextLegacy">复制文本</button>
</template>

<script>
export default {
  methods: {
    copyTextLegacy() {
      const textToCopy = '需要复制的文本内容';
      const textarea = document.createElement('textarea');
      textarea.value = textToCopy;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
      alert('复制成功');
    }
  }
};
</script>

使用第三方库 vue-clipboard2

如果需要更简单的实现方式，可以安装 vue-clipboard2 库。

安装依赖：

npm install vue-clipboard2

使用示例：

<template>
  <button v-clipboard:copy="textToCopy">复制文本</button>
</template>

<script>
import Vue from 'vue';
import VueClipboard from 'vue-clipboard2';

Vue.use(VueClipboard);

export default {
  data() {
    return {
      textToCopy: '需要复制的文本内容'
    };
  }
};
</script>

动态绑定复制内容

可以根据需要动态绑定要复制的内容。

<template>
  <input v-model="dynamicText" />
  <button @click="copyDynamicText">复制输入框内容</button>
</template>

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

处理复制反馈

为了提升用户体验，可以添加复制成功或失败的反馈提示。

vue 实现点击复制代码

<template>
  <button @click="copyWithFeedback">复制文本</button>
  <p v-if="copyStatus">{{ copyStatus }}</p>
</template>

<script>
export default {
  data() {
    return {
      copyStatus: ''
    };
  },
  methods: {
    async copyWithFeedback() {
      try {
        await navigator.clipboard.writeText('需要复制的文本');
        this.copyStatus = '复制成功';
        setTimeout(() => {
          this.copyStatus = '';
        }, 2000);
      } catch (err) {
        this.copyStatus = '复制失败';
      }
    }
  }
};
</script>