uniProject/components/MtaNavbar/MtaNavbar.vue

<template>
	<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
		title="自定义导航栏" @clickLeft="handleBack">
		<!-- <image src="/static/logo.png" mode=""></image> -->
		<view>logo</view>
		<block slot="right" v-if="hasRight">
			<uni-icons type="bars" size="30" color="#fff" @click="handleChangeMenu"></uni-icons>
		</block>
	</uni-nav-bar>

	<!-- 菜单面板 -->
	<uni-collapse ref="collapse" accordion v-model="data.activeMenu" v-show="data.showMenu">
		<uni-collapse-item :title="item.title" v-for="item in data.list" :key="item.title" :name="item.url">
			<view v-for="cIt in item.children" :key="item.title" @click="handleClick(cIt)">
				<view class="content">
					<text class="text" :class="{active: cIt.url.includes(data.activePath)}">{{cIt.title}}</text>
				</view>
			</view>
		</uni-collapse-item>
	</uni-collapse>

</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	const showLeft = ref(null)
	import {
		onLoad
	} from "@dcloudio/uni-app"

	const props = defineProps({
		hasRight: {
			type: Boolean,
			default: true
		}
	})

	const ani = ref(null)

	const data = reactive({
		list: [{
				title: '1',
				url: '1',
				children: [{
					title: '1-1',
					url: '/pages/dqgzDangjiangongzuo/dqgzDangjiangongzuo'
				}, {
					title: '1-2',
					url: 'http://www.baidu.com',
					type: 'link'
				}, {
					title: '1-3',
					url: '/pages/index/index'
				}, {
					title: '1-4',
					url: '2'
				}, ]
			},
			{
				title: '2',
				url: '3',
				children: [{
					title: '2-1',
					url: '4'
				}, {
					title: '2-2',
					url: '5'
				}, {
					title: '2-3',
					url: '6'
				}, {
					title: '2-4',
					url: '7'
				}]
			}
		],
		activeMenu: null,
		activePath: '',
		showMenu: false,
	})

	onLoad(() => {
		const pages = getCurrentPages();
		data.activePath = pages[pages.length - 1].route;
		const parentMenu = data.list.find(item => item.children.some(cit => cit.url.includes(data.activePath)));
		console.log('parentMenu && parentMenu.url', parentMenu && parentMenu.url)
		data.activeMenu = parentMenu && parentMenu.url;
	})

	function handleClick(data) {
		console.log(`菜单:${data.title};路径:${data.url}`);
		if (data.type == 'link') {
			window.location.href = data.url;
			return;
		}
		if (data.url) {
			uni.navigateTo({
				url: data.url
			})
		}
	}

	function handleChangeMenu() {
		data.showMenu = !data.showMenu;
	}

	function handleBack() {
		uni.navigateBack()
	}
</script>

<style>
</style>