DaoDao/DaoDaoFrontend/pages/tabbar/tabbar-4/Tools.vue

<template>
	<view class="tools">
		<button class="tool-btn" @click="showEmojiPicker">
			<image src="/static/emoji.png" alt="Emoji" />
		</button>
		<button class="tool-btn" @click="showPlusMenu">
			<image src="/static/plus.png" alt="More" />
		</button>
		<EmojiPicker v-if="showEmoji" @emoji-selected="insertEmoji" />
	</view>
</template>

<script>
	import EmojiPicker from './EmojiPicker.vue';
	export default {
		name: 'Tools',
		components: {
			EmojiPicker,
		},
		data() {
			return {
				showEmoji: false,
			};
		},
		methods: {
			showEmojiPicker() {
				this.showEmoji = true;
				// 通知父组件
				// this.$emit('emoji-picker-shown');
			},
			showPlusMenu() {
				// ...
			},
			insertEmoji(emoji) {
				// 插入emoji到文本框或消息中
				// 例如，你可能需要调用一个方法来处理插入emoji
				console.log('Selected emoji:', emoji);
				this.showEmoji = false;
			},
		},
	};
</script>

<style scoped>
	.tools {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}

	.tool-btn {
		width: 40px;
		height: 40px;
		border: none;
		background: none;
		cursor: pointer;
	}

	.emoji-picker {
		position: absolute;
		bottom: 50px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 100;
	}
</style>