From 1ed69aab3d1c57f5096f57c8d77b396b0c5babe4 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期三, 17 四月 2024 09:13:43 +0800
Subject: [PATCH] menu调整
---
src/layout/layout.vue | 114 ++++-----------------------------------------------------
1 files changed, 8 insertions(+), 106 deletions(-)
diff --git a/src/layout/layout.vue b/src/layout/layout.vue
index aff9cda..2185c8c 100644
--- a/src/layout/layout.vue
+++ b/src/layout/layout.vue
@@ -1,115 +1,17 @@
<template>
<div class="layoutBox">
- <div class="menuBox">
- <div :class="['menuItem', activeMenu == index ? 'active' : '']" v-for="(item, index) in menuData" :key="index"
- @click="menuItemClick(index)">
- <div class="menuIcon">
- <el-icon v-if="item.icon == 'FolderOpened'" :size="24">
- <FolderOpened />
- </el-icon>
- <el-icon v-if="item.icon == 'Files'" :size="24">
- <Files />
- </el-icon>
- <el-icon v-if="item.icon == 'Switch'" :size="24">
- <Switch />
- </el-icon>
- <el-icon v-if="item.icon == 'Setting'" :size="24">
- <Setting />
- </el-icon>
- </div>
- <p>{{ item.name }}</p>
- </div>
- </div>
- <div class="pageBox">
- <RouterView />
- </div>
+ <RouterView />
</div>
</template>
<script setup lang="ts">
- import { ref, reactive, watch } from 'vue'
- import { useRouter, RouterView } from 'vue-router'
- const router = useRouter()
-
- // 鑿滃崟
- const menuData = reactive([
- // {
- // name: '鏂囦欢',
- // icon: 'FolderOpened',
- // router: '/home'
- // },
- {
- name: '浼犺緭',
- icon: 'Switch',
- router: '/transmission'
- },
- // {
- // name: '瀵煎嚭',
- // icon: 'Files',
- // router: '/exportTask'
- // },
- {
- name: '璁剧疆',
- icon: 'Setting',
- router: '/setting'
- }
- ])
-
- // 閫変腑鑿滃崟
- const activeMenu = ref(0)
-
- // 鐩戝惉璺敱鍙樺寲锛岄粯璁ら�変腑鑿滃崟
- watch(
- () => router.currentRoute.value, (newRoute) => {
- console.log(newRoute.path)
-
- const index = menuData.findIndex((item) => item.router == newRoute.path)
- activeMenu.value = index > -1 ? index : 0
- }
- )
-
- // 鑿滃崟鐐瑰嚮
- const menuItemClick = (index) => {
- activeMenu.value = index
- router.push(menuData[index].router)
- }
+import { ref, reactive, watch } from 'vue'
+import { useRouter, RouterView } from 'vue-router'
</script>
<style lang="less">
- .layoutBox {
- width: 100%;
- height: 100%;
- display: flex;
-
- .menuBox {
- width: 80px;
- background-color: #f5f5f6;
- border-right: 1px solid #e6e7e8;
- padding: 10px;
- box-sizing: border-box;
-
- .menuItem {
- padding: 8px 0;
- text-align: center;
- border-radius: 8px;
- line-height: 1;
- cursor: pointer;
- margin-bottom: 10px;
-
- &.active,
- &:hover {
- background-color: #e3e3e5;
- }
-
- .menuIcon {
- margin-bottom: 4px;
- }
- }
- }
-
- .pageBox {
- flex: 1;
- overflow: auto;
- }
- }
-</style>
\ No newline at end of file
+.layoutBox {
+ width: 100%;
+ height: 100%;
+}
+</style>
--
Gitblit v1.9.1