聊天页引入emoji表情

效果图：

 实现：

1、在components文件夹内新建emoji文件夹：

将emoji.js文件放入该文件夹，可网上找相应资源，也可以直接用我放的这个包

新建expression.vue文件然后直接复制以下代码即可：

<template>
	<view class="emotion-wrap">
		<swiper class="swiper-wrap" indicator-dots="true" duration="150">
			<swiper-item v-for="(page,pid) in list" :key="pid">
				<view class="emotion-box">
					<view v-for="(em,eid) in page" :key="eid" @tap="handleClikEmoji(em)">
						<text>{{em}}</text>
						<!-- <image :src="`/static/face/${em.url}`" mode="" class="emotion"></image> -->
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import emojiList from "./emoji.js"
	export default {
		name:'expression',
		data() {
			return {
				list: emojiList,
				cur: {}
			}
		},
		methods: {
			handleSend() {
				this.$emit('send')
			},
			handleRemoveEmoji() {
				this.$emit('addEmoji', this.cur, true)
			},
			handleClikEmoji(item) {
				this.$emit('addEmoji', item)
			}
		}
	}
</script>

<style lang="scss">
	.emotion-wrap {
		height: 400rpx;
		padding-left: 2%;
		padding-bottom: 20px;
		overflow: auto;
		
		
		.emotion-box {
			padding-top: 30px;
			display: grid;
			grid-template-columns: repeat(8, 12.5%);
			justify-content: space-between;
			/*水平*/
			align-content: center;
			&>view {
				margin-bottom: 20rpx;
				text {
					font-size: 45rpx;
				}
			}
		}
		
		.swiper-wrap {
			height: 100%;
		}

		.emotion-btn {
			z-index: 1;
			position: fixed;
			right: 20rpx;
			bottom: 30rpx;
		}

		.emotion-del {
			margin-right: 10rpx;
		}

		.emotion {
			float: left;
			margin: 5px;
			width: 70rpx;
			height: 70rpx;
		}
	}
</style>

最后在需要用的地方引入组件

@addEmoji是监听子组件的@tap事件：

	const clickEmoji=(item:any)=>{
		sendMsg.value=item
		emojiPop.value.close()
	}

item即为选中表情

tips:如果表情包无法下载可私信我，发现下载文件好像需要会员，真gou啊