MeetMateApp/pages/chat/components/emoji.vue

<template>
	<view
		class="chat-emoji"
		:class="[
			{
				'is-show': visible
			}
		]"
	>
		<scroll-view scroll-y class="scroller">
			<cl-row>
				<cl-col :span="4" v-for="(item, index) in emoji" :key="index">
					<view class="block" @tap="select(item)">
						{{item}}
					</view>
				</cl-col>
			</cl-row>
		</scroll-view>
	</view>
</template>

<script>

export default {
	props: {
		visible: Boolean
	},

	data() {
		return {
		};
	},

	methods: {
		select(e) {
			this.$emit("select", e);
		}
	}
};
</script>

<style lang="scss" scoped>
.chat-emoji {
	height: 0;
	box-sizing: border-box;
	transition: height 0.3s;

	&.is-show {
		height: 400rpx;
		padding: 10rpx 0 0 0;
	}

	.scroller {
		height: 100%;

		.block {
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
			height: 100rpx;

			&:active {
				background-color: #f7f7f7;
			}

			image {
				display: inline-block;
				height: 60rpx;
				width: 60rpx;
			}
		}
	}
}
</style>