uniapp 设备剪贴板

最新推荐文章于 2024-04-12 11:00:56 发布

爱美丽007

最新推荐文章于 2024-04-12 11:00:56 发布

阅读量93

点赞数

文章标签： uni-app

本文链接：https://blog.csdn.net/weixin_63456913/article/details/128980737

版权

本文展示了在uni-app中如何使用uni.setClipboardData和uni.getClipboardData方法实现文本的复制和粘贴功能。通过在Vue组件中定义copy和paste方法，用户可以方便地对输入框的内容进行操作。

摘要由CSDN通过智能技术生成

复制

示例:

uni.setClipboardData({
	data: 'hello',
	success: function () {
		console.log('success');
	}
});

粘贴
实例

uni.getClipboardData({
	success: function (res) {
		console.log(res.data);
	}
});

实践：

<template>
	<view class="content">
		<input type="text" v-model="value" style="width: 700rpx;height: 100rpx;border: 1px solid #007AFF;">
		<button class="button" @click="copy()">复制</button>
		<button class="button" @click="paste()">粘贴</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: ''
			}
		},
		methods: {
			// 复制
			copy() {
				uni.setClipboardData({
					data: 'hello',
					success: () => {
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						});
					}
				});
			},
			// 粘贴
			paste() {
				uni.getClipboardData({
					success: (res) => {
						this.value = res.data
					}
				});
			}
		}
	}
</script>