天天看點

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'
						})
					}
				})
			}
           

以上代碼可以直接複制使用,親測有效

如有問題,歡迎留言!!

繼續閱讀