uni-app H5开发项目,复制 所遇的坑
一开始使用如下的复制方法,发现ios端无法正常复制,原因暂未找到,有人说因为select,ios无法使用,而后又用了setSelectionRange,依旧没用,因为我的H5项目是嵌入到app中的
// An highlighted block
var input1 = document.createElement("input"); // 直接构建input
input1.value = item.downFile; // 设置内容
document.body.appendChild(input1)
// input1.select(); // 选择实例内容
if (input1.setSelectionRange) {
input1.setSelectionRange(0, input1.value.length)
input1.focus()
} else {
input1.select()
}
而后引入clipboard.js,发现需要点击两次才能进成功的回调,试过多种办法,加mouseenter事件等等都不管用
<view class="dn_btn"
@click="doCopy"
:data-clipboard-text="item.downFile"
data-clipboard-action="copy">复制
</view>
docopy(){
APIcollection.Permission({tableId,infoId})
.then((res) => {
var clipboard = new Clipboard('.dn_btn');
clipboard.on('success', (e) => {
console.info('Text:', e.text, 111);
uni.showToast({
title: '已复制,请前往浏览器粘贴下载'
})
clipboard.destroy()
});
clipboard.on('error', (e) => {
// console.error('Action:', e.action);
// console.error('Trigger:', e.trigger);
clipboard.destroy()
});
}
终于在多次排除后发现是因为放在了请求成功的回调(异步)的方法中 ,所以出现需要点击两次才能进回调,后又使用了async 函数,依旧不管用,最后只能用jq的请求,async:false 完美解决该问题
doCopy(event) {
var jurisdiction = false
var params = {
tableId: tableId,
infoId: infoId,
}
$.ajax({
url: url,
dataType: 'json',
data: JSON.stringify(params),//此处如果不stringify一下会报400
async: false, //此处必须为false
type: 'post',
headers: {
'token': uni.getStorageSync('token'),
'Content-Type': 'application/json' //注意一下该处类型,会报415错误
},
success: (res) => {
if (res.data == true) {
jurisdiction = true
} else {
jurisdiction = false
this.$refs.uToast.show({
title: "没有复制权限",
type: "error",
position: "top",
});
}
},
})
if (!jurisdiction) return
//以下内容不能放在 ajax的success中
var clipboard = new Clipboard('.dn_btn');
clipboard.on('success', (e) => {
// console.info('Action:', e.action);
console.info('Text:', e.text, 111);
// console.info('Trigger:', e.trigger);
uni.showToast({
title: '已复制,请前往浏览器粘贴下载'
})
clipboard.destroy()
});
clipboard.on('error', (e) => {
clipboard.destroy()
});
},