fanghuayuexuan/components/emoji-picker.vue

<template>
	<view class="emoji-picker">
		<view class="emoji-header">
			<text class="title">表情</text>
			<text class="close" @click="handleClose">关闭</text>
		</view>
		<view class="emoji-list">
			<view 
				v-for="(emoji, index) in emojiList" 
				:key="index"
				class="emoji-item"
				@click="handleEmojiClick(emoji)"
			>
				<text class="emoji">{{ emoji }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'EmojiPicker',
	props: {
		visible: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			// 表情列表
			emojiList: [
				'😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣',
				'😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰',
				'😘', '😗', '😙', '😚', '😋', '😛', '😝', '😜',
				'🤪', '🤨', '🧐', '🤓', '😎', '🤩', '🥳', '😏',
				'😒', '😞', '😔', '😟', '😕', '🙁', '☹️', '😣',
				'😖', '😫', '😩', '🥺', '😢', '😭', '😤', '😠',
				'😡', '🤬', '🤯', '😳', '🥵', '🥶', '😱', '😨',
				'😰', '😥', '😓', '🤗', '🤔', '🤭', '🤫', '🤥'
			]
		}
	},
	methods: {
		// 点击表情
		handleEmojiClick(emoji) {
			this.$emit('select', emoji);
		},
		// 点击关闭
		handleClose() {
			this.$emit('close');
		}
	}
}
</script>

<style lang="scss" scoped>
.emoji-picker {
	background-color: #ffffff;
	border-top: 1rpx solid #EEEEEE;
	position: fixed;
	bottom: 100rpx;
	left: 0;
	right: 0;
	z-index: 999;

	.emoji-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 24rpx;
		border-bottom: 1rpx solid #F0F0F0;

		.title {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
		}

		.close {
			font-size: 26rpx;
			color: #999999;
		}
	}

	.emoji-list {
		display: flex;
		flex-wrap: wrap;
		padding: 24rpx;

		.emoji-item {
			width: 20%;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.emoji {
				font-size: 40rpx;
			}
		}
	}
}
</style>