Code-Create/src/components/main-menu-dialog.vue

<template>
	<div class="main-menu-dialog" @click="close" v-custom-show="show">
		<div class="close" @click="close"><span class="iconfont icon-close"></span></div>
		<div class="content" @click.stop>
			<div class="menu-item" v-for="item in menuList" :key="item.name">
				<router-link
					@click="onItemClick(item)"
					class="link"
					:class="{
						active: activeChild === item.name,
						parent: !!item.children
					}"
					:to="item.path"
					>{{ $t(item.name) }}</router-link
				>
				<div v-if="item.children" class="child" v-show="activeChild === item.name">
					<router-link
						class="link"
						:to="child.path"
						v-for="child in item.children"
						:key="child.name"
						@click="close"
					>
						{{ $t(child.name) }}
					</router-link>
				</div>
			</div>
			<!-- <router-link class="link" to="/my-account" @click="close">
				<span class="iconfont icon-tubiao-"></span>
				<span v-if="token">{{ $t('MainHeader.MyAccount') }}</span>
				<span v-else>{{ $t('MainHeader.LoginOrSignin') }}</span>
			</router-link> -->
			<div class="lang">
				<router-link
					class="link"
					:to="`/${item.value}${path}`"
					v-for="item in langList"
					:key="item.value"
					v-show="item.value !== locale"
					@click="close"
				>
					{{ item.label }}
				</router-link>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
	import { ref, watch, computed, onMounted, onBeforeUnmount } from 'vue'
	import DownMenu from './down-menu.vue'
	import { setLang, LangType } from '../lang/index.js'
	import { useI18n } from 'vue-i18n'
	import { useUserInfoStore } from '@/stores/userInfo'
	const userInfoStore = useUserInfoStore()
	const { locale } = useI18n()
	const token = computed(() => userInfoStore.state.token)
	const props = defineProps({
		menuList: {
			type: [Array, Object],
			default: () => []
		},
		langList: {
			type: [Array, Object],
			default: () => []
		},
		path: {
			type: String,
			default: ''
		}
	})
	const activeChild = ref('')
	const show = ref(false)
	const close = () => {
		show.value = false
	}
	const open = () => {
		show.value = true
	}
	const onItemClick = (item) => {
		if (item.children) {
			if (activeChild.value === item.name) {
				activeChild.value = ''
			} else {
				activeChild.value = item.name
			}
		} else {
			close()
		}
	}
	defineExpose({
		open,
		close
	})
</script>
<style lang="less" scoped>
	.main-menu-dialog {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(24, 24, 24, 0.3);
		z-index: 10001;
		overflow: hidden;
		display: flex;
		justify-content: flex-end;

		> .close {
			width: 37px;
			height: 37px;
			border-radius: 50%;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			margin: 10px;
			color: #222;
		}
		&.hide {
			> .content {
				margin-right: -100px;
			}
		}
		> .content {
			transition: margin-right 0.3s;
			max-width: 300px;
			flex: 1;
			height: 100%;
			background-color: #4d4d4d;
			padding: 10px 20px;
			.link {
				color: #fff;
				text-decoration: none;
				font-size: 14px;
				display: flex;
				align-items: center;
				padding: 10px 0;
				&:hover {
					color: #d5d5d5;
				}
				> .iconfont {
					margin-right: 5px;
					font-size: 22px;
				}
			}
			> .menu-item {
				> .parent {
					position: relative;
					&::after,
					&::before {
						content: '';
						position: absolute;
						width: 6px;
						height: 0;
						border-top: 1px solid #fff;
						right: 0;
						transition: transform 0.2s linear;
					}
					&::after {
						transform: rotate(-45deg);
					}
					&::before {
						right: 4px;
						transform: rotate(45deg);
					}
					&.active {
						&::after,
						&::before {
							transform: rotate(0deg);
						}
					}
				}
				> .child {
					opacity: 0.7;
					border-left: 1px solid #e1e1e1;
					> .link {
						padding-left: 20px;
					}
				}
			}
			> .lang {
				display: flex;
				align-items: center;
				margin-top: 20px;
				margin-left: 10px;
				> .link {
					padding: 0 10px;
				}
			}
		}
	}
</style>