uniIM/components/Faces.vue

<template>
	<view>
		<view class="faces">
			<view class="face" v-for="(item, index) in faceList" :key="index">
				<image class="image" :src="faceMap.get(item)" :alt="item" :title="item" @tap="insertFace(item)" />
			</view>
		</view>
		<div class="clear"></div>
	</view>
</template>

<script setup lang="ts">
import FaceUtils from "@/utils/FaceUtils";
import {ref} from "vue";

const faceList = ref(FaceUtils.alt);
	const faceMap = ref(FaceUtils.faces());
  const emit = defineEmits(["insertFace"]);
	const insertFace = (item: string) => {
		emit("insertFace", item);
	};
</script>

<style lang="scss" scoped>
	.faces {
		width: 100%;
		list-style: none;
		background-color: #ffffff;
		border: 1px solid #f0f5ff;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

		&>.face {
			display: flex;
			padding: 4px;
			float: left;
			cursor: pointer;
			height: 37px;
			width: 37px;
			justify-content: center;
			.image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>