描述下问题:

博主原创,转载附上本博文链接

1、博主用的 "clipboard": "^2.0.4",

2、vue3环境、复制的内容和按钮在动态组件里 ,复制内容异步生成

如果你的问题是如上我所描述在继续往下看

复制不了的问题

博主原来的代码如下

generateLink(promotionPath,type){
			let m=this;
			let url=promotionPath
			if(type){//基础广告
				url=`\<script src=\"`+promotionPath+`\"\>\<\/script>`
			}
			
			let clipboard = new m.Clipboard('.copy', {
			   text: function () {
				   return url
			   }
		   })
		
			clipboard.on('success', e => {
				m.$message.success('复制成功')
				// 释放内存
				clipboard.destroy()
			})
			clipboard.on('error', e => {
				m.$message.warning('复制失败')
				clipboard.destroy()
			})
		}

vue2里面是可以用的,结果发现vue3直接不行了。

修改2个地方

1、按钮的地方,传入$event

generateLink(scope.row.promotionPath,true,$event)

2、代码的地方

替换new的 对象,当然 你方法generateLink(promotionPath,type,e)也要加入一个变量e

let clipboard = new m.Clipboard(e.currentTarget, {
			  text: () => url 
		    })

 好了,你点2次发现复制的了,

说说首次复制要点两次的解决方案

这里可能只能口述了,因为是博主的临时解决方案

1、点击的按钮加一个class并绑定id   :class="'copy'+scope.row.id"

2、data里加一个字典   copyEd:{}  

3、methods的copy方法  加一个className 

generateLink(promotionPath,type,e,className)

copy方法的最后一行加一个判断首次的

if(!m.copyEd[className]){
				$("."+className).click();
				m.copyEd[className]=true
			}

这样就可以每次首次复制的时候用jquery触发复制1次,临时解决方案,如果有更好的大家可以在评论区发下群主知道,因为项目赶的原因,有时间再去研究,

博主原创,转载附上本博文链接

Logo

前往低代码交流专区

更多推荐