Clipboard在vue3复制不了,和点2次才成功问题解决方案
描述下问题:博主原创,转载附上本博文链接1、博主用的"clipboard": "^2.0.4",2、vue3环境、复制的内容和按钮在动态组件里 ,复制内容异步生成如果你的问题是如上我所描述在继续往下看复制不了的问题博主原来的代码如下generateLink(promotionPath,type){let m=this;let url=promotionPathif(type){//基础广告url=
·
描述下问题:
博主原创,转载附上本博文链接
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次,临时解决方案,如果有更好的大家可以在评论区发下群主知道,因为项目赶的原因,有时间再去研究,
博主原创,转载附上本博文链接
更多推荐
已为社区贡献15条内容
所有评论(0)