clipboard.js 进行文本复制

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

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

//在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文件并不大，但是却可以帮我们做很多事情，减轻很多调试和避免采坑。以上只是记录一下自己遇到的问题，如有错误，还请指正，如有帮助，请关注点赞哈。