vue 3中使用复制功能

在 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>

 

说明

• 方法 1: 使用 Clipboard API 是最简单的方法，直接通过 navigator.clipboard.writeText 方法进行复制。
• 方法 2: 使用 vue-clipboard3 使得复制操作更简单和直观，也能提供处理成功和失败的回调。

选择其中一种方式根据你的需求来实现复制功能。