app一键复制信息

一键复制收货地址等信息:

设置系统剪贴板的内容 uni.setClipboardData (OBJECT)

获取剪贴板内容 uni.getClipboardData(OBJECT)

父组件

 <zyzz-copy :content=" '收货姓名：' + deliverInfo.refund_name"
             text="一键复制"   
             :coustomStyle="{
                backgroundColor: '#007AFF',
                color: '#ffffff',
                borderRadius: '6rpx',
                padding: '6rpx 20rpx',
                fontSize: '24rpx',
                border: 'none'
             }"
		@copy="onCopy">
 </zyzz-copy>
 
 
  onCopy(result) {
    if (result.status) {
        console.log('复制成功:', result.content);
    } else {
        console.log('复制失败');
        uni.showToast({ 
            title: '复制失败', 
            icon: 'none' 
        });
    }
},

子组件：

<template>
	<view @tap="copyText">
		<slot :status="status" :content="content" name="trigger">
			<view class="btn" :style="coustomStyle">{{ text }}</view>
		</slot>
	</view>
</template>

<script>
export default {
	name: 'zyzz-copy',
	props: {
		content: {
			type: String,
			default: ''
		},
		text: {
			type: String,
			default: '复制'
		},
		tipsContent: {
			type: String,
			default: '复制成功'
		},
		coustomStyle: {
			type: Object,
			default: null
		}
	},
	emits: ['copy'],
	data() {
		return {
			status: false
		}
	},
	methods: {
		copyText() {
			uni.setClipboardData({
				data: this.content,
				success: () => {
					if (this.tipsContent) {
						uni.showToast({ 
							title: this.tipsContent, 
							icon: 'none' 
						});
					}
					this.status = true;
					this.$emit('copy', { 
						status: true, 
						content: this.content 
					});
				},
				fail: () => {
					this.status = false;
					this.$emit('copy', { 
						status: false, 
						content: this.content 
					});
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.btn {
	padding:4rpx 6rpx;
  background-color: #fff;
  color: #787C80;
  border: 1rpx solid #A2A8AE;
  border-radius: 8rpx;
  min-width: 59rpx;
	line-height: 1em;
  font-size: 22rpx;
}
</style>