在用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'
})
}
})
}
以上代碼可以直接複制使用,親測有效
如有問題,歡迎留言!!