uniapp 模仿 Android的Menu菜单栏

下面这张图就是我们要模拟的菜单功能

一、模拟的逻辑

1. 我们使用uni-popup组件（记得要用hbuilder X导入该组件）
   uni-app官网

2. 将组件内的菜单自定义样式

二、uniapp代码 写法vue3

<template>
	<view>
		<uni-popup ref="showMenu" type="right" mask-background-color="rgba(0,0,0,0.1)">
			<view class="popup-content">
				<view @click="doAction(1)">哈哈哈哈</view>
				<view @click="doAction(2)">嘻嘻嘻嘻</view>
				<view @click="doAction(3)">呜呜呜呜</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {ref,onMounted} from "vue";
	let showMenu = ref(null);
    onMounted({
        showPopup(); 
    });
	//显示菜单
	const showPopup = () => {
		showMenu.value.open();
	}
	//处理菜单选项的动作
	const doAction = (index) => {
		console.log(index);
		showMenu.value.close();
	}

</script>

<style scoped lang="scss">
	.popup-content {
		width: 300rpx;
		background-color: #F8f8f8;
		border-radius: 8px;
		padding: 16px;
		color: #e5e5e5;
		margin-top: 100rpx;
		margin-right: 16rpx;
		view{
			padding: 20rpx;
		}
	}
</style>