sky-take-out/src/commpent/aside.vue

<template>
	<el-menu :collapse="store.isCollapse">
		<div :style="!store.isCollapse ? 'width: 100%' : 'width: 63px'" class="logo">
			<img v-show="!store.isCollapse" alt="图标" src="../assets/login/logo.png" srcset="../assets/login/logo.png" />
			<img v-show="store.isCollapse" alt="图标" src="../assets/login/mini-logo.png" srcset="../assets/login/mini-logo.png" />
		</div>
		<el-menu-item v-for="(item, index) in menuData" :key="index" :index="(index + 1).toString()">
			<el-icon>
				<component :is="item.icon" />
			</el-icon>
			<template #title> {{ item.label }}</template>
		</el-menu-item>
	</el-menu>
</template>

<script lang="ts" setup>
import { headerStore } from '@/store/header';

const store = headerStore();

const menuData = [
	{
		path: '/statistics',
		name: 'statistics',
		label: '首页',
		icon: 'Menu',
		url: 'Home/Home',
	},
	{
		path: '/order',
		name: 'home',
		label: '首页',
		icon: 'Menu',
		url: 'Home/Home',
	},
	{
		path: '/setmeal',
		name: 'home',
		label: '首页',
		icon: 'Menu',
		url: 'Home/Home',
	},
	{
		path: '/dish',
		name: 'home',
		label: '首页',
		icon: 'Menu',
		url: 'Home/Home',
	},
	{
		path: '/category',
		name: 'home',
		label: '首页',
		icon: 'Menu',
		url: 'Home/Home',
	},
	{
		path: '/employee',
		name: 'home',
		label: '首页',
		icon: 'Menu',
		url: 'Home/Home',
	},
	{
		path: '/',
		name: 'mall',
		label: '商品管理',
		icon: 'Document',
		url: 'MallManage/MallManage',
	},
];
</script>

<style lang="scss" scoped>
// 图标
.logo {
	float: left;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 62px;
	background-color: var(--el-color-primary);

	img {
		height: 31px;
	}
}

.el-menu {
	max-width: 200px;
	min-width: 63px;
	height: 100%;
	background: #343744;

	.el-menu-item {
		color: #bfcbd9;
	}
}
</style>