yglt-uniapp/components/Menu.vue

<template>
	<view class="menu">
		<image class="homelogo" @click="jump(0)" src="/static/homelogo.png" />
		<div v-for="item in data" key="item.id" @click="jump(item.id)" ref="dropdownRef" class="menu-item"
			:class="type==item.id?'menu-active':''">
			{{item.title}}
			<span v-if="type==item.id" class="triangle">&#9650; </span>
		</div>

	</view>
	<div class="dropdown-menu" v-if="isOpen" ref="dropdownContentRef" :style="dialogStyle">
		<div v-for="item in dContent" key="item.id" :class="childType==item.id?'menu-active-child':''"
			@click="jumpChild(item.id)">
			{{item.title}}
		</div>
	</div>

</template>

<script setup>
	import {
		ref,
		nextTick
	} from 'vue';
	const isOpen = ref(false);
	const dropdownRef = ref(null);
	const dropdownContentRef = ref(null);
	const dContent = ref([])

	const dialogStyle = ref()

	let dialogHight;

	const props = defineProps({
		type: {
			type: Number,
			default: 0,
		},
		childType: {
			type: Number,
			default: 0,
		}
	})

	const data = [{
			id: 1,
			title: "品牌展示"
		},
		{
			id: 2,
			title: "区位配套"
		},
		{
			id: 3,
			title: "项目规划"
		},
		{
			id: 4,
			title: "户型展示",
			child: [{
				id: 41,
				title: "高层"
			}, {
				id: 42,
				title: "别墅"
			}]
		},
		{
			id: 5,
			title: "动线漫游"
		}, {
			id: 6,
			title: "建筑细节"
		}, {
			id: 7,
			title: "科技系统"
		}

	]
	const jump = (index) => {
		let u;
		switch (index) {
			case 0:
				u = '/pages/index/index';
				break;
			case 1:
				u = '/pages/BrandDisplay/BrandDisplay';
				break;
			case 2:
				u = '/pages/LocationAmenities/LocationAmenities';
				break;
			case 3:
				u = '/pages/ProjectPlanning/ProjectPlanning';
				break;
			case 4:
				u = '/pages/FloorPlanShowcase/FloorPlanShowcase';
				break;
			case 5:
				u = '/pages/RouteNavigation/RouteNavigation';
				break;
			case 6:
				u = '/pages/ArchitecturalDetails/ArchitecturalDetails';
				break;
			case 7:
				u = '/pages/TechnologySystems/TechnologySystems';
				break;
		}
		if (index == 4) {
			dContent.value = data[index - 1].child;
			isOpen.value = !isOpen.value;
			if (isOpen.value) {
				nextTick(() => {
					const content = dropdownContentRef.value;
					uni.createSelectorQuery().select('.dropdown-menu').boundingClientRect(data => {
							dialogHight = data.height;
						}).selectAll('.menu-item').boundingClientRect(data => {
							dialogStyle.value = {
								width: `${data[index-1].width}px`,
								top: `${data[index-1].top - dialogHight }px`,
								left: `${data[index-1].left}px`,
							}
						})
						.exec();
				});
			}
		} else if (props.type != index) {
			uni.navigateTo({
				url: u,
				animationType: "fade-in"
			});
		}
	}

	const jumpChild = (index) => {
		let u;
		switch (index) {
			case 41:
				u = '/pages/FloorPlanShowcaseHeigh/FloorPlanShowcaseHeigh';
				break;
			case 42:
				u = '/pages/FloorPlanShowcase/FloorPlanShowcase';
				break;
		}

		if (props.childType != index) {
			uni.navigateTo({
				url: u,
				animationType: "fade-in"
			});
		}
	}
</script>

<style scoped>
	.homelogo {
		width: 150rpx;
		height: 30rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;
	}

	.menu {
		display: flex;
		height: 100%;
		background-color: rgba(44 61, 43, 0.5);
		justify-content: center;
		align-items: center;
		font-size: 15rpx;
		border-top: 2rpx solid #FFE7CE;
	}

	.menu div {
		color: white;
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.menu .menu-active {
		background-color: rgba(255 231, 206, 0.3);
		position: relative;
	}

	.menu-active-child {
		color: rgba(255 231, 206, 1);
	}

	.triangle {
		color: #FFE7CE;
		font-size: 10rpx;
		position: absolute;
		bottom: 0px
	}

	.menu-item {}

	.dropdown-menu {
		display: flex;
		flex-direction: column;
		background-color: rgba(44 61, 43, 0.5);
		position: absolute;
		color: white;
		font-size: 14rpx;
	}

	.dropdown-menu>div {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 5rpx;
	}
</style>