当前位置: 首页 > 工具软件 > Clipboard.js > 使用案例 >

clipboard.js 进行文本复制

邓深
2023-12-01

最近在做项目的时候,有需要用的复制文本的功能。然后就觉得可以使用原生的复制方法和使用第三方库。

一、浏览器原生方法
这种方式兼容性不是太好,还要看浏览器是否支持,容易踩坑。

//在IE中可以用window.clipboardData.setData('text','内容')实现。
//在IE中clipboardData是window的属性,而其他浏览器则是相应的event对象的属性,这实际上是一种安全措施,防止未经授权的访问,为了兼容其他浏览器,所以我们不能通过clipboardData来实现这种操作。
//具体做法:
//1.创建一个隐藏的input框
//2.点击的时候,将要复制的内容放进input框中
//3.选择文本内容input.select()
//4.这里只能用input或者textarea才能选择文本。
//5.执行浏览器的复制命令document.execCommand("copy")。
 function copyText() {
   var text = document.getElementById("text").innerText; // 获取要复制的内容也可以传进来
   var input = document.getElementById("input"); // 获取隐藏input的dom
   input.value = text; // 修改文本框的内容
   input.select(); // 选中文本
   document.execCommand("copy"); // 执行浏览器复制命令
   alert("复制成功");
 }

//在事件中可以通过e 对内容进行修饰
document.body.oncopy = e => {
   // 监听全局复制 做点什么
}
 // 还有这种写法:
document.addEventListener("copy", e => {
  // 监听全局复制 做点什么
});

二、使用第三方插件clipboard.js

我项目用的是vue框架,下面的方法是在vue中使用的方法,其他框架大同小异。

(1)、安装:

npm install clipboard --save

(2)、在main.js中引入,设置成全局的,因为在项目有可能不只是一处使用到复制的功能。(当然我们也可以在用到的.vue中引入)。

/*main.js*/
import clipboard from 'clipboard';
//注册到vue原型上
Vue.prototype.clipboard = clipboard;

(3)、在需要的地方使用:

<template>
	<div class="address_box">
		<h3 v-text="lang.walletAddress">{{lang.walletAddress}}</h3>
		<p>{{addressStr}}</p>
		
		/*
		:data-clipboard-text="addressStr" 中绑定要复制的内容
		
		*/ 
		<div class="btn_box" :data-clipboard-text="addressStr" @click="copyFun" v-text="lang.btnCopy">{{lang.btnCopy}}</div>
	</div>
</template>

<script>
export default{
	methods:{
		copyFun(){   // 点击复制的方法
	      var clipboard = new Clipboard('.btn_box');   // 这里的dom要对应上标签里点击的按钮的dom
	      clipboard.on('success', e => {  
	          Toast({  message: '复制成功',duration: 1500 }); 
	          // 释放内存  
	          clipboard.destroy()  
	      })  
	      clipboard.on('error', e => {  
	          // 不支持复制  
	          console.log('该浏览器不支持自动复制')  
	          // 释放内存  
	          clipboard.destroy()  
	      })  
	  }
	}
}
</script>

当然clipboard.js的功能可不止这么简单,我们还可使用它进行剪切,还可以通过它复制其他元素的值等,具体的使用可查看官方文档:clipboard.js;

在做一键复制的需求时候,推荐使用clipboard.js来做,因为现在原生方法兼容性并不是很好,而且clipboard.js文件并不大,但是却可以帮我们做很多事情,减轻很多调试和避免采坑。以上只是记录一下自己遇到的问题,如有错误,还请指正,如有帮助,请关注点赞哈。

 类似资料: