vue 实现复制内容到剪贴板

最新推荐文章于 2025-06-19 18:09:42 发布

web_hj

最新推荐文章于 2025-06-19 18:09:42 发布

阅读量387

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/web_hj/article/details/115400347

vue 专栏收录该内容

15 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中安装和使用vue-clipboard2插件来实现文本复制功能。首先通过npm安装插件，然后在main.js中全局注入，最后在组件中配置并监听复制成功和失败的回调函数，提供友好的用户反馈。

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

复制内容至剪切板使用的是插件'vue-clipboard2'

一、安装插件

npm install vue-clipboard2 --save

二、全局注入（main.js）

import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

三、使用

<div>{{message}}</div>

<i title="复制"
   v-clipboard:copy="message"      //message 要复制的内容
   v-clipboard:success="onCopy"    //
   v-clipboard:error="onError"
   class="el-icon-document-copy pointer"></i>

onCopy:function(value){
  console.log(value)
  this.$message.success("复制成功！")
},

onError:function(e){

this.$message.error("复制失败")

}