clipboard.js复制动态数据

clipboard.js复制请求到的数据
在页面中用一个标签来存储，样式设置为opacity: 0;就会隐藏起来

<div id="copyData" :data-clipboard-text="copyData" style="opacity: 0;"></div>
	<p @click="CopyProductLink(item)">复制</p>

页面初始化时要对clipboard进行初始化，
不然会出现第一次点击复制无效 或者点击复制到的内容是上一次点击的数据

这里我引入了vue.js

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

 mounted() {
    
    
	this.init() //页面初始化
},
methods:{
    
    
	init(){
    
    
		this.clipboard = new ClipboardJS('#copyData') //clipboard初始化
		this.clipboard.on("success",function(){
    
    
			console.log("复制成功")
	})
},

点击事件触发后发起请求，用setTimeout对clipboard延迟处理
不然这里复制到的只是空的数据，（执行顺序是clipboard比请求先）

CopyProductLink(production){
    
    
//这里哪种请求方式都可以，ajax，axios都可以
		axios.get('url').then(res => {
    
    
			this.copyData = res.data.data //copyData是存在data里的变量
			setTimeout(function(){
    
     //这里延迟处理
				$("#copyData").click() //这里触发clipboard复制
			},1)
		})
	},