sugarpark-mini-program/components/tui-chat/message-elements/emoji/index.vue

<template>
	<view class="emoji-box flex-start">
		<view v-for="(item, index) in emojiList" :key="index" class="emoji-item">
			<image :data-name="item.emojiName" class="emoji-img" :src="item.url" @tap="handleEnterEmoji"></image>
		</view>
	</view>
</template>

<script>
import { emojiName, emojiUrl, emojiMap } from '../../../base/emojiMap';

export default {
	data() {
		return {
			emojiList: []
		};
	},

	components: {},
	props: {},

	beforeMount() {
		for (let i = 0; i < emojiName.length; i++) {
			this.emojiList.push({
				emojiName: emojiName[i],
				url: emojiUrl + emojiMap[emojiName[i]]
			});
		}
		
		// this.setData({
		// 	emojiList: this.emojiList
		// });
	},

	methods: {
		handleEnterEmoji(event) {
			this.$emit('enterEmoji', {
				detail: {
					message: event.currentTarget.dataset.name
				}
			});
		}
	}
};
</script>
<style>
@import './index.css';
</style>