小程序中的复制功能H5页面中的复制功能uni-app框架实现
目录
小程序中的复制功能、H5页面中的复制功能（uni-app框架实现）
（1）小程序中的复制功能（h5页面中不支持，微信开发者工具中支持）
官方文档地址：
//复制文本内容
copyCenter(){
console.log('复制内容~~');
let address = '11111fdshf返回的是科技孵化的思考和反抗集散地和'
//设置系统剪贴板的内容 提示：API `setClipboardData` is not yet implemented 表示当前并不支持H5 此功能
uni.setClipboardData({
data: address,
success: function (res) {
console.log('复制的信息：',address);
uni.showToast({
title: '复制成功',
});
}
});
}（2）H5页面中的复制功能 （使用：clipboard ：官方地址： ）
这里我就只讲一个npm的安装使用方法: （更多相关文档： ）
1、先安装第三方依赖
2、项目中引入
3、将需要点击的标签中设置一个独特的类名
4、调用复制方法
npm install clipboard --save //项目中安装clipboard
//.vue文件中导入 clipboard
import Clipboard from 'clipboard';
// H5中复制功能 这里使用第三方的
copyLink(data) {
//这里是复制目标的类名
let clipboard = new Clipboard('.copy-h5', {
text: function() {
return data
}
})
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text); //复制的文本内容
console.info('Trigger:', e.trigger); //节点
e.clearSelection(); //清除选中的文字的选择状态
uni.showToast({
icon: 'success', // success / none / loading 3个有效参数
title: '复制成功~',
duration: 2000
});
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
}效果展示：
