DaoDao/DaoDaoFrontend/pages/tabbar/tabbar-4/EmojiPicker.vue

<template>
	<div class="emoji-picker">
		<div class="emoji-row" v-for="row in emojis" :key="row.id">
			<div class="emoji" @click="selectEmoji(emoji)" v-for="emoji in row.emojis" :key="emoji.code">
				{{ emoji.symbol }}
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'EmojiPicker',
		data() {
			return {
				emojis: [{
						id: 1,
						emojis: [{
								id: 1,
								symbol: '😀',
								code: 'grinning'
							},
							{
								id: 2,
								symbol: '😂',
								code: 'grinning-squinting-tears'
							},
							// 更多emoji...
						]
					},
					// 更多行...
				],
			};
		},
		methods: {
			selectEmoji(emoji) {
				this.$emit('emoji-selected', emoji);
			},
		},
	};
</script>

<style scoped>
	.emoji-picker {
		/* 定义样式 */
	}

	.emoji-row {
		display: flex;
	}

	.emoji {
		padding: 4px;
		cursor: pointer;
		margin: 2px;
	}
</style>