vue实现点击复制

在 Vue 中实现点击复制功能，通常有两种常见的方式：使用浏览器的Clipboard API(现代浏览器支持)使用第三方库，如clipboard.js下面我会分别介绍这两种方法。方法一：使用Clipboard APIClipboard API 是现代浏览器提供的原生 API，可以直接用来实现剪贴板的操作，适用于大多数...

egzosn

1139人浏览 · 2025-01-09 16:02:12

egzosn · 2025-01-09 16:02:12 发布

在 Vue 中实现点击复制功能，通常有两种常见的方式：

使用浏览器的 Clipboard API(现代浏览器支持)
使用第三方库，如 clipboard.js

下面我会分别介绍这两种方法。

方法一：使用 `Clipboard API`

Clipboard API 是现代浏览器提供的原生 API，可以直接用来实现剪贴板的操作，适用于大多数常见的现代浏览器。

代码实现：

<template>
  <div>
    <input v-model="textToCopy" type="text" placeholder="输入内容" />
    <button @click="copyText">点击复制</button>
    <p v-if="isCopied">已复制!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textToCopy: '',
      isCopied: false
    };
  },
  methods: {
    async copyText() {
      try {
        // 使用 Clipboard API 写入剪贴板
        await navigator.clipboard.writeText(this.textToCopy);
        this.isCopied = true;
        
        // 复制后，显示提示信息 1.5秒后隐藏
        setTimeout(() => {
          this.isCopied = false;
        }, 1500);
      } catch (err) {
        console.error('复制失败:', err);
      }
    }
  }
};
</script>

<style scoped>
button {
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

p {
  color: green;
}
</style>

解释：

使用 navigator.clipboard.writeText 方法将输入框中的文本复制到剪贴板。
textToCopy 是绑定到输入框的变量，用户可以输入文本，点击按钮时将其复制。
isCopied 是一个用于控制复制成功提示的标志，成功复制后，提示“已复制”，并在 1.5 秒后自动消失。

方法二：使用 `clipboard.js` 第三方库

clipboard.js 是一个轻量级的 JavaScript 库，用于处理复制到剪贴板的操作，兼容性好，适用于旧版浏览器。

安装 `clipboard.js`：

或者通过 CDN 引入(适用于快速测试)：

代码实现：

<template>
  <div>
    <input v-model="textToCopy" type="text" placeholder="输入内容" />
    <button ref="copyButton" :data-clipboard-text="textToCopy">点击复制</button>
    <p v-if="isCopied">已复制!</p>
  </div>
</template>

<script>
import Clipboard from 'clipboard';

export default {
  data() {
    return {
      textToCopy: '',
      isCopied: false
    };
  },
  mounted() {
    const clipboard = new Clipboard(this.$refs.copyButton);

    clipboard.on('success', () => {
      this.isCopied = true;
      setTimeout(() => {
        this.isCopied = false;
      }, 1500);
    });

    clipboard.on('error', (e) => {
      console.error('复制失败:', e);
    });
  }
};
</script>

<style scoped>
button {
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

p {
  color: green;
}
</style>