Vue3 复制 copy 功能实现（vue-clipboard3）

最新推荐文章于 2025-04-30 18:14:08 发布

原创最新推荐文章于 2025-04-30 18:14:08 发布 · 7.2k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue3.x 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何在Vue3中使用vue-clipboard3插件实现复制功能。通过在setup或script setup中引入useClipboard来实现文本复制，并提供复制按钮点击事件的具体实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装 vue-clipboard3，附：vue2 复制 copy 功能实现
```
$ npm install --save vue-clipboard3
```

在 setup () {} 中使用：

<template>
  <button @click="touchCopy">复制链接</button>
</template>

<script>
import { defineComponent } from 'vue'
// 导入插件
import useClipboard from 'vue-clipboard3'

export default defineComponent({
  setup () {
    // 点击复制
    function touchCopy () {
      // 调用
      copy('拷贝内容')
    }
    // 使用插件
    const { toClipboard } = useClipboard()
    const copy = async (msg) => {
      try {
        // 复制
        await toClipboard(msg)
        // 复制成功
      } catch (e) {
        // 复制失败
      }
    }
    // 导出
    return {
      // 点击复制
      touchCopy
    }
  }
})
</script>

在 <script setup> 中使用：

<template>
  <button @click="touchCopy">复制链接</button>
</template>

<script setup>
// 导入插件
import useClipboard from 'vue-clipboard3'

// 点击复制
function touchCopy () {
  // 调用
  copy('拷贝内容')
}
// 使用插件
const { toClipboard } = useClipboard()
const copy = async (msg) => {
  try {
    // 复制
    await toClipboard(msg)
    // 复制成功
  } catch (e) {
    // 复制失败
  }
}
</script>