h5-sugarpark/src/components/Emoji/emoji.vue

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

<script>
import { emojiName, emojiUrl, emojiMap } from '../../../src/util/emojiMap.js';

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]]
			});
		}
	},

	methods: {
		handleEnterEmoji(event) {
			this.$emit('enterEmoji', {
				detail: {
					message: event.currentTarget.dataset.name
				}
			});
		}
	}
};
</script>
<style>
.emoji-box{
	height: 200px;
	flex-wrap: wrap;
	transition: height .3s;
	overflow-y: scroll;
}
.emoji-item{
	width:8%;
	display: inline;
	margin: 1%;
}
.emoji-img{
	width:100%;
}
</style>