sxc-frontend/miniprogram/components/ss_chat/child/SsChatSendMessage.vue

<template>
	<view class="ss-chat-send-message">
		<view class="message">
			<image class="message-icon" mode="aspectFit" :src="getStaticImageUrl('/images/copy.png')" @tap="copyMessage" />
			<image class="message-icon" mode="aspectFit" :src="getStaticImageUrl('/images/edit.png')" @tap="editMessage" />
			<view class="bubble">{{ message }}</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'SsChatSendMessage',
	props: {
		message: {
			type: String,
			default: ''
		}
	},
	methods: {
		copyMessage() {
			uni.setClipboardData({
				data: this.message,
				success: () => {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
				}
			});
		},
		editMessage() {
			this.$emit('editMessage', this.message);
		}
	}
};
</script>

<style scoped lang="scss">
.ss-chat-send-message {
	display: flex;
	justify-content: end;
	justify-content: flex-end;
	margin-bottom: 32rpx;

	.message {
		max-width: 100%;
		display: flex;
		justify-content: end;
		align-items: center;
		cursor: pointer;

		.message-icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 16rpx;
			color: #7e8aa2;
			font-size: 38rpx;
			opacity: 1;
			transition: opacity 0.2s linear;
		}

		.bubble {
			padding: 12rpx 24rpx;
			border-radius: 20rpx 0 20rpx 20rpx;
			background-color: rgba(41, 67, 214, 0.1);
			color: #545764;
			font-size: 30rpx;
			line-height: 48rpx;
		}
	}
}
</style>