vue 实现点击复制文本功能 clipboard 具体使用步骤

shaowen前端小时光

于 2021-01-29 14:28:02 发布

阅读量345

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_43860807/article/details/113386084

版权

VUE 专栏收录该内容

5 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中利用clipboard.js库实现网页内容的复制功能。通过npm安装clipboard，然后在组件中引入并配置监听事件，实现了点击按钮后自动复制文本的功能。同时，针对不同浏览器的兼容性问题提供了错误处理方案。

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

安装 clipboard

npm install clipboard --save

在需要使用的组件中引入 clipboard

import Clipboard from 'clipboard';

添加需要复制的内容

<div>
    <span class="fuzhi_span" data-clipboard-text="123" @click="copy>复制</span>
</div>

添加点击后的方法

copy() {
  var _this = this;
  var clipboard = new Clipboard('.fuzhi_span') // 点击事件绑定的 class 名
  clipboard.on('success', e => {
     _this.$message.success("复制成功")
     clipboard.destroy() // 释放内存
  })
  clipboard.on('error', e => {
      _this.$message.error('该浏览器不支持自动复制')
     clipboard.destroy() // 释放内存
  })
}