前端 uni-app 小程序 使用setClipboardData、getClipboardData实现 复制和粘贴功能 微信小程序和支付宝小程序APP都能使用,这里用的是vue3
在uni-app中,使用setClipboardData
和getClipboardData
实现复制粘贴功能。
以下是实现复制和粘贴功能的示例代码:
复制功能(将文本复制到剪贴板):
// 复制文本到剪贴板
function copyTextToClipboard(text) {
uni.setClipboardData({
data: text,
success: function () {
console.log('复制成功');
// 可以添加用户友好的提示
uni.showToast({ title: '复制成功', icon: 'success', duration: 2000 });
}
});
}
粘贴功能(从剪贴板粘贴文本):
// 从剪贴板粘贴文本
function getTextFromClipboard() {
uni.getClipboardData({
success: function (res) {
console.log('粘贴的文本:' + res.data);
// 可以添加用户友好的提示
uni.showToast({ title: '已获取剪贴板内容', icon: 'success', duration: 2000 });
}
});
}
在页面中使用这两个函数:
<template>
<view>
<button @click="copyTextToClipboard('要复制的文本内容')">复制文本</button>
<button @click="getTextFromClipboard">粘贴文本</button>
</view>
</template>
请注意,setClipboardData
和getClipboardData
是微信小程序提供的API,因此这段代码仅适用于微信小程序环境。如果需要在其他平台使用,请参考uni-app官方文档,查看对应平台的API和解决方案。
评论已关闭