vue中点击复制粘贴功能

vue中点击复制粘贴功能

1.下载clipboard.js

npm install clipboard --save 

2.引入，可以在mian.js中全局引入也可以在单个vue中引入

import Clipboard from 'clipboard'; 

3.使用，在template中，这里我用了vant框架

<!-- Target -->
<textarea id="bar" class="copy_textarea" v-model="copy"></textarea>
<div class="release-item" @click="releasefn()">发布</div>
<div class="release-center"></div>
<!-- Trigger -->
<button
   class="btn release-item"
   data-clipboard-action="cut"
   data-clipboard-target="#bar"
   @click="pc"
>
   去pc发布
 </button>

4.使用，在methods中

data() {
        return {
            user_id: 0, //用户id
            copy: "" //复制内容
        };
},
    
methods: {
	// 获取用户信息
	getMyInfo: function() {
	   this.$api.user.me().then(res => {
	       this.user_id = res.id;
	       this.copy = `http://travel.admin.dev.zhangxinkeji.com/Itinerary/index/userId/${this.user_id}.html`;
	   });
	},
	
	//生成链接到pc发布
	pc() {
	  var clipboard = new Clipboard(".btn");
	  clipboard.on("success", e => {
	      // success("复制成功"); //这里你如果引入了elementui的提示就可以用，没有就注释即可
	      this.$toast("已复制到剪切板，请粘贴网址发布");
	      // 释放内存
	      clipboard.destroy();
	  });
	  clipboard.on("error", e => {
	      // 不支持复制
	      console.log("该浏览器不支持自动复制");
	      // 释放内存
	      clipboard.destroy();
	  });
	  console.log(this.copy);
	  // this.$toast("已复制到剪切板，请粘贴网址发布");
	},
}