0
点赞
收藏
分享

微信扫一扫

【关于使用clipboard.js,在异步方法中需要点击两遍才能弹出成功提示的问题】

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()
				});
			},
		
举报

相关推荐

0 条评论