在写H5页面时,有个功能点击复制分享链接,在微信浏览器中点击发现部分iOS机型首次复制并没有复制成功,但是非首次就能复制成功,不止是iOS端,部分安卓端也有这个问题。因此在点击复制的事件中执行两次复制,这样就能保证每次都能复制成功。代码如下:
copyPathcopy(url) {
let clipboard = new Clipboard('.mybtns', {
// 点击copy按钮,直接通过text直接返回复印的内容
text: function () {
return url;
}
});
clipboard.on('success', function (e) {
showMessage("链接已复制~");
});
clipboard.on('error', function (e) {
showMessage("复制失败!");
});
},
copyPath(url) {
let that = this;
if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(url).then(() => {
showMessage("链接已复制~");
}).catch(err => {
that.copyPathcopy(url)
setTimeout(function () {
that.copyPathcopy(url) //如果复制失败则再次复制
}, 200)
})
} else {
that.copyPathcopy(url)
setTimeout(function () {
that.copyPathcopy(url) //如果复制失败则再次复制
}, 200)
}
},
这是写在methods中的,我们用的是vue1总体写法应该大差不差,思路就是如果首次复制不成功就写一个setTimeout再次复制。