vue 3中使用复制功能

最新推荐文章于 2025-06-16 17:15:54 发布

原创最新推荐文章于 2025-06-16 17:15:54 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

在 Vue 3 中实现复制功能可以使用浏览器内置的 Clipboard API，或者借助一些第三方库，比如 vue-clipboard3。下面是这两种方法的示例。

方法 1: 使用 Clipboard API

示例代码

<template>
  <div>
    <input v-model="textToCopy" placeholder="输入要复制的内容" />
    <button @click="copy">复制</button>
    <p v-if="copySuccess">{{ copySuccess }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const textToCopy = ref('');
const copySuccess = ref('');

const copy = async () => {
  try {
    await navigator.clipboard.writeText(textToCopy.value);
    copySuccess.value = '已复制到剪贴板!';
  } catch (err) {
    copySuccess.value = '复制失败!';
    console.error(err);
  }
};
</script>

<style>
/* 你可以添加一些样式 */
</style>

方法 2: 使用 `vue-clipboard3`

安装

首先安装 vue-clipboard3：

npm install vue-clipboard3

<template>
  <div>
    <input v-model="textToCopy" placeholder="输入要复制的内容" />
    <button v-clipboard:copy="textToCopy" v-clipboard:success="copySuccess" v-clipboard:error="copyError">复制</button>
    <p v-if="copySuccess">{{ copySuccess }}</p>
  </div>
</template>

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

const { toClipboard } = useClipboard();
const textToCopy = ref('');
const copySuccess = ref('');

const copySuccessHandler = () => {
  copySuccess.value = '已复制到剪贴板!';
};

const copyErrorHandler = () => {
  copySuccess.value = '复制失败!';
};

</script>

<style>
/* 你可以添加一些样式 */
</style>