1.报错的图片:
2.uni.setClipboardData(OBJECT)
//示例如下
uni.setClipboardData({
data: 'hello',
success: function () {
console.log('success');
}
});
3.实际项目中还是不能使用。
4.解决方法:
步骤如下:
1.安装 npm i clipboard --save
2.封装一个方法()
clipboard.js(这是一个js文件封装方法)
import Clipboard from 'clipboard'
export 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)
}
3.页面中使用
vue
<view class="content_copy" @click="copy('需要复制的内容')">复制</view>
js
//引入这个js 并且调用这个方法{handleClipboard}
import {handleClipboard} from '../../utils/clipboard.js'
export default{
//自定义方法在methods中使用
methods:{
//复制
copy(data) {//这是一个点击事件
// #ifdef H5
handleClipboard(data, event, () => { //调用封装的复制方法
uni.showToast({//弹出
// icon: 'none',//不显示图标
icon: 'success',//显示图标
title: '复制成功'
})
}, ()=>{
uni.showToast({
icon: 'none',//不显示图标
title: '复制失败',
})
})
// #endif
},
}
}
icon图标的选项看自己项目的需求来定义。
(vue、uni-app、h5)
总结:需要注意的是本地是否npm下载此插件成功,之后在创建js文件夹调用此方法实现功能。