vue3中实现Clipboard.js复制文案功能

最新推荐文章于 2025-10-23 18:38:30 发布

原创最新推荐文章于 2025-10-23 18:38:30 发布 · 512 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

本文介绍如何通过vue-clipboard3插件实现在Vue应用中一键复制文本到剪贴板的功能。文章首先指导安装所需的依赖包，然后提供了一个具体的使用案例，包括HTML模板中的按钮绑定点击事件以及TypeScript脚本中的复制逻辑。

1.安装依赖

npm install vue-clipboard3 --save

2.使用案例

<template lang="html">
  <button @click="copy">copy</button>
</template>

<script lang="ts" setup>
//引入
import useClipboard from 'vue-clipboard3'
const { toClipboard } = useClipboard()

const copy = async () => {

      try {
            await toClipboard('需要复制的链接')
            $message.success('复制成功')
       } catch (e) {
            console.error(e)
            $message.error('复制失败')
          }
       }
</script>