天天看点

uniapp实现复制剪切功能(app端和h5端)

在用uniapp写项目时,总会遇到一些需求是无法在app端和h5端同时实现的,这时候就需要两端分开写,比如经常遇到的复制剪切的功能:

app端:

这里用到的方法 setClipboardData 和 getClipboardData 可以参考一下官网的详细介绍 https://uniapp.dcloud.io/api/system/clipboard

coypLink(data) {
				uni.setClipboardData({
					data: data,
					success: function() {
						uni.showToast({
							title: '复制成功!',
							icon: 'none'
						})
					},
					fail: function() {
						uni.showToast({
							title: '复制失败!',
							icon: 'none'
						})
					}
				});
				uni.getClipboardData({
					success: function(res) {
						console.log(res.data);
					}
				});
			}
           

h5端:

setClipboardData(data) {
				return new Promise((success, fail) => {
					// #ifndef H5
					uni.setClipboardData({
						data,
						success,
						fail
					})
					// #endif

					// #ifdef H5
					const textarea = document.createElement('textarea');
					textarea.value = data
					textarea.readOnly = true
					document.body.appendChild(textarea)
					textarea.select()
					textarea.setSelectionRange(0, data.length)
					document.execCommand('copy')
					textarea.remove()
					success(data)
					// #endif
				})
			},
			copyLink(content){
				this.setClipboardData(content).then((res) => {
					if(res == ''){
						uni.showToast({
							title:'复制失败!',
							icon:'none'
						})
					}else{
						uni.showToast({
							title:'复制成功!',
							icon:'none'
						})
					}
				})
			}
           

以上代码可以直接复制使用,亲测有效

如有问题,欢迎留言!!

继续阅读