点击按钮，实现复制文本到粘贴板

最新推荐文章于 2024-08-17 11:48:52 发布

ChangYan.

最新推荐文章于 2024-08-17 11:48:52 发布

阅读量966

点赞数

分类专栏：前端文章标签： html javascript

本文链接：https://blog.csdn.net/changyana/article/details/120293195

版权

前端专栏收录该内容

86 篇文章

订阅专栏

本文介绍了如何利用clipboard.js库在Vue应用中实现点击按钮复制文本到剪贴板的功能。首先引入clipboard.js，然后在HTML中设置data-clipboard-target属性绑定文本框。在JavaScript部分，通过创建ClipboardJS实例并监听'success'和'error'事件来处理复制操作。遇到的问题是文本框在页面上可见，解决方案是参考作者的另一篇文章来隐藏输入框。

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

效果

如图，点击右边的【复制】按钮，就可以将左边的体验码复制到粘贴板，我这里是用的vue，其实原理都一样
在这里插入图片描述

实现

1.实现思路

首先要引入clipboard.js文件，该文件中具有要实现复制的功能。
然后在button里加入data-clipboard-target属性绑定一个文本框用来获取要复制的内容

2.实现代码

html

<!--一个文本框用来获取要复制的内容-->
<el-input id="foo" icon="el-icon-edit" size="mini" value="当前体验码" /> 
<!--通过data-clipboard-target="#foo"来绑定按钮与文本框，当点击按钮时触发copy()函数-->
<el-button class="btn" type="success" plain icon="el-icon-edit" data-clipboard-target="#foo" @click="copy(scope.row.code)">复制体验码</el-button>

最重要的是data-clipboard-target进行绑定和点击按钮触发copy()函数

javascript

import ClipboardJS from 'clipboard'		//引入clipboard.js文件用于复制

    copy(code){
          var name = document.getElementById("foo");	//通过id获取到文本框
          name.value = code;		//将要复制的内容赋值给文本框
          var clipboard = new ClipboardJS('.btn');		//绑定button
          clipboard.on('success', e => {
            this.$message.success('体验码已复制到剪切板，可粘贴');
            clipboard.destroy()
          });
          clipboard.on('error', e => {
            this.$message.error('当前浏览器不支持此功能');
            clipboard.destroy()
          });      
    }