项目中点击按钮复制文本

在工作摸鱼了三年年之后，我终于没有摸鱼了。咳咳，废话不多说，直接开始正文。
前不久项目里面有个需求，就是点击按钮实现复制输入框里面的文本，虽然很简单，毕竟没做过。直接上图：
![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8f50b34095ca484495ea1c513f31034e~tplv-k3u1fbpfcp-zoom-1.image)
这个是用了一个插件，clipboard.js（项目是vue的）
1、npm i clipboard --save
2、在需要用到的页面import Clipboard from "clipboard";
3、<div class="cloneBtn" @click="copy" :data-clipboard-text="cloneText">复制</div>
4、点击事件方法：
	// 文本复制
	copy() {
  		console.log(1);
  		var _this = this;
  		var clipboard = new Clipboard(".cloneBtn"); 
  		clipboard.on("success", (e) => {
    		this.$message({
      			message: "复制成功",
      			type: "success",
    		});
    		// 释放内存
    		clipboard.destroy();
  		});
  		clipboard.on("error", (e) => {
    		// 不支持复制
    		Message({
      			message: "该浏览器不支持自动复制",
      			type: "warning",
    		});
    		// 释放内存
    		clipboard.destroy();
  		});
	},
   
   小结：虽然挺简单的，但是我一开始是把这个在main.js中全局引用的，但是不生效，所以放单个页面里面引用才生效。也是百度了不少之后才做出来的，害，本文就当是在未来哪年的某天回来看看自己的曾经吧。