/* 复制 */
export function copy(text) {
uni.setClipboardData({
data: text,
success: function () {
uni.showToast({
icon: 'none',
title: '复制成功'
})
},
fail: function () {
uni.showToast({
icon: 'none',
title: '复制失败'
})
}
});
}
注意:ios使用该api时,会回弹页面,用户体验感很不好
改进
使用clipboard插件
npm install clipboard --save
或者
yarn add clipboard
使用
import Clipboard from 'clipboard';
//复制文本插件
function handleClipboard (text, event, onSuccess, onError) {
event = event || {}
const clipboard = new Clipboard(event.target, {
text: () => text
})
clipboard.on('success', () => {
onSuccess()
clipboard.off('error')
clipboard.off('success')
clipboard.destroy()
})
clipboard.on('error', () => {
onError()
clipboard.off('error')
clipboard.off('success')
clipboard.destroy()
})
clipboard.onClick(event)
}
/* 复制 */
export function copy(text) {
const t = Vue.prototype._i18n;//多语言
if(!text){
//复制失败
return;
}
handleClipboard(text,event,() => {
//复制成功
},() => {
// 复制失败
});
}
后来遇到一个重大问题,即ios上,有时候会复制不了,也不提示报错。
经过查询,发现是复制这个功能不能间接复制,间接复制指的是要在复制一个文本前,先请求了某个接口,从接口里拿到复制的文本,虽然也算用户触发复制,但不算直接触发,而是要经过一个接口才触发到复制,所以复制不了。
那么就要拆流程了,先拿到需要复制的文本,在让用户复制。
data(){
return{
copyText:''
}
},
onLoad(){
//先请求接口获取复制的文本
this.getText();
},
methods:{
//在进行复制
copy(){
...
},
//获取复制的文本
getText(){
...
this.copyText = 'xxx'
}
}