From e0365ac78517e131e79760ba0249a5f47d6624ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E4=BF=9E=E4=BC=BD?= <qq2562643305@163.com>
Date: Fri, 12 May 2023 09:19:19 +0000
Subject: [PATCH 1/2] 1
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 陈俞伽 <qq2562643305@163.com>
---
 .../2023-05-05\350\217\234\345\215\225.md"    | 58 +++++++++++++++++++
 .../2023-05-08\345\233\276\346\240\207.md"    | 24 ++++++++
 2 files changed, 82 insertions(+)
 create mode 100644 "38\351\231\210\344\277\236\344\274\275/2023-05-05\350\217\234\345\215\225.md"
 create mode 100644 "38\351\231\210\344\277\236\344\274\275/2023-05-08\345\233\276\346\240\207.md"

diff --git "a/38\351\231\210\344\277\236\344\274\275/2023-05-05\350\217\234\345\215\225.md" "b/38\351\231\210\344\277\236\344\274\275/2023-05-05\350\217\234\345\215\225.md"
new file mode 100644
index 0000000..f9ac3fa
--- /dev/null
+++ "b/38\351\231\210\344\277\236\344\274\275/2023-05-05\350\217\234\345\215\225.md"
@@ -0,0 +1,58 @@
+菜单
+```js
+//  用到的菜单组件(Meun)介绍  Menu 菜单 | Element Plus (gitee.io)
+//  el-menu  整个左侧菜单最外层必须使用menu 包裹着
+//  el-submenu 一级菜单组件
+//  el-icon 菜单图标项
+//  span 菜单的文本 
+//  el-menu-item 二级菜单组件
+1
+        <!-- 侧边栏菜单区域 -->
+2
+        <el-menu
+3
+        active-text-color="#ffd04b"
+4
+        background-color="#545c64"
+5
+        text-color="#fff">
+6
+        <!-- 一级菜单 -->
+7
+        <el-submenu index="1">
+8
+          <!-- 一级菜单模板区域 -->
+9
+          <template #title>
+10
+            <!-- 图标 -->
+11
+            <el-icon><location /></el-icon>
+12
+            <!-- 文本 -->
+15
+          <!-- 二级菜单 -->
+16
+          <el-menu-item index="1-4-1">
+17
+            <!-- 二级菜单模板区域 -->
+18
+          <template #title>
+19
+            <!-- 图标 -->
+20
+            <el-icon><document /></el-icon>
+21
+            <!-- 文本 -->
+22
+            <span>导航二</span>
+23
+          </template>
+24
+          </el-menu-item>
+25
+        </el-submenu>
+26
+      </el-menu>
+
+```
\ No newline at end of file
diff --git "a/38\351\231\210\344\277\236\344\274\275/2023-05-08\345\233\276\346\240\207.md" "b/38\351\231\210\344\277\236\344\274\275/2023-05-08\345\233\276\346\240\207.md"
new file mode 100644
index 0000000..f43ea19
--- /dev/null
+++ "b/38\351\231\210\344\277\236\344\274\275/2023-05-08\345\233\276\346\240\207.md"
@@ -0,0 +1,24 @@
+```js
+// 使用包管理器#
+// # 选择一个你喜欢的包管理器
+{
+// # NPM
+// $ npm install @element-plus/icons-vue
+// # Yarn
+// $ yarn add @element-plus/icons-vue
+// # pnpm
+// $ pnpm install @element-plus/icons-vue
+}
+// 注册所有图标#
+// 您需要从 @element-plus/icons-vue 中导入所有图标并进行全局注册。
+
+// main.ts
+
+// 如果您正在使用CDN引入，请删除下面一行。
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+
+const app = createApp(App)
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+```
\ No newline at end of file
-- 
Gitee


From 5279ffd4ba37b358850557d298690d2780679434 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E4=BF=9E=E4=BC=BD?= <qq2562643305@163.com>
Date: Sun, 14 May 2023 14:04:43 +0000
Subject: [PATCH 2/2] 12
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 陈俞伽 <qq2562643305@163.com>
---
 ...6\350\217\234\345\215\225\346\240\217..md" | 173 ++++++++++++++++++
 ...50\347\232\204\346\225\260\347\273\204.md" |  70 +++++++
 2 files changed, 243 insertions(+)
 create mode 100644 "38\351\231\210\344\277\236\344\274\275/2023-05-09\346\224\266\350\217\234\345\215\225\346\240\217..md"
 create mode 100644 "38\351\231\210\344\277\236\344\274\275/2023-05-12\347\273\231\350\267\257\347\224\261\347\224\250\347\232\204\346\225\260\347\273\204.md"

diff --git "a/38\351\231\210\344\277\236\344\274\275/2023-05-09\346\224\266\350\217\234\345\215\225\346\240\217..md" "b/38\351\231\210\344\277\236\344\274\275/2023-05-09\346\224\266\350\217\234\345\215\225\346\240\217..md"
new file mode 100644
index 0000000..b4134c6
--- /dev/null
+++ "b/38\351\231\210\344\277\236\344\274\275/2023-05-09\346\224\266\350\217\234\345\215\225\346\240\217..md"
@@ -0,0 +1,173 @@
+```vue
+<script setup>
+import { reactive, ref } from 'vue'
+import MenuItem from './MenuBar/MenuItem.vue'
+
+const menus = reactive([{
+  title: '设置',
+  name: '/',
+  meta: { icon: 'setting' },
+  children: [
+    { title: '来了', meta: { icon: 'user' }, name: '/laile' },
+    { title: '哈哈', meta: { icon: 'user' }, name: '/haha' },
+    {
+      title: '嘻嘻',
+      icon: 'UserFilled',
+      name: '/bigxixi',
+      children: [
+        { title: 'xixi', meta: { icon: 'user' }, name: '/bigxixi/smallxixi' },
+        { title: '啦啦啦啦啦啦', meta: { icon: 'user' }, name: '/bigxixi/lalala' },
+        {
+          title: '呵呵',
+          meta: { icon: 'Avatar' },
+          name: '/bigxixi/bighehe',
+          children: [
+            { title: 'hehe', meta: { icon: 'user' }, name: '/bigxixi/bighehe/smallhehe' }
+          ]
+        }
+      ]
+    }
+  ]
+},
+{
+  title: '试试',
+  meta: { icon: 'PieChart' },
+  name: '/shishi'
+}
+])
+
+let panDuan1 = ref(false)
+
+const anNiu = reactive({
+  anNiu: panDuan1,
+})
+
+let kuan = ref('200px');
+
+
+function change() {
+  panDuan1.value = !panDuan1.value
+  if (panDuan1.value) {
+    kuan.value = 64 + 'px'
+  } else {
+    kuan.value = 200 + 'px'
+  }
+}
+
+
+
+
+</script>
+
+<template>
+  <div class="common-layout">
+    <el-container>
+      <el-header>
+        <el-icon @click="change" size="50" :class="anNiu">
+          <expand></expand>
+        </el-icon>
+      </el-header>
+      <el-container>
+        <el-aside :width="kuan">
+          <!-- <el-menu>
+                  <el-sub-menu>
+                    <template #title>
+                      设置
+                    </template>
+                    <el-menu-item>哈哈</el-menu-item>
+                    <el-sub-menu>
+                      <template #title>
+                        嘻嘻
+                      </template>
+                      <el-menu-item>xixi</el-menu-item>
+                      <el-sub-menu>
+                        <template #title>
+                          呵呵
+                        </template>
+                        <el-menu-item>
+                          hehe
+                        </el-menu-item>
+                      </el-sub-menu>
+                    </el-sub-menu>
+                  </el-sub-menu>
+                </el-menu> -->
+          <!-- <el-menu>
+              <template v-for="menu in menus">
+                <el-sub-menu v-if="menu.children && menu.children.length > 0">
+                  <template #title>{{ menu.title }}</template>
+                  <template v-for="men in menu.children">
+                    <el-sub-menu v-if="men.children && men.children.length > 0">
+                      <template #title>{{ men.title }}</template>
+                      <template v-for="me in men.children">
+                        <el-sub-menu v-if="me.children && me.children.length > 0">
+                          <template #title>{{ me.title }}</template>
+                          <template v-for="m in me.children">
+                            <el-sub-menu v-if="m.children && m.children.length > 0">
+                              <template #title>{{ m.title }}</template>
+                            </el-sub-menu>
+                            <el-menu-item v-else>{{ m.title }}</el-menu-item>
+                          </template>
+                        </el-sub-menu>
+                        <el-menu-item v-else>{{ me.title }}</el-menu-item>
+                      </template>
+                    </el-sub-menu>
+                    <el-menu-item v-else>{{ men.title }}</el-menu-item>
+                  </template>
+                </el-sub-menu>
+                <el-menu-item v-else>{{ menu.title }}</el-menu-item>
+              </template>
+            </el-menu> -->
+
+          <el-menu :collapse="panDuan1" :defalt-active="$router.path" router>
+            <MenuItem :menus="menus">
+            </MenuItem>
+          </el-menu>
+        </el-aside>
+        <el-container>
+          <el-main>
+            <RouterView></RouterView>
+          </el-main>
+          <el-footer>
+            <div class="down">
+              <div class="inside">版权所有 yyy</div>
+              <div>
+                <div class="inside"><a href="https://beian.miit.gov.cn/">沪ICP备09004260号-1</a></div>
+                <div class="inside"><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010602011771">
+                    <span>
+                      <el-image :src="'../../public/img/ghs.png'"></el-image>
+                      浙公网安备 33010602011771号
+                    </span>
+                  </a></div>
+              </div>
+
+            </div>
+          </el-footer>
+        </el-container>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+<style scoped>
+.inside {
+  text-align: center;
+}
+
+.el-aside {
+  height: calc(100vh - 60px);
+  /* background-color: orange; */
+}
+
+.anNiu {
+  transform: rotate(90deg);
+}
+
+.el-main {
+  background-color: orange;
+}
+
+.down {
+  display: flex;
+  justify-content:space-around;
+  font-size: smaller;
+}</style>
+```
\ No newline at end of file
diff --git "a/38\351\231\210\344\277\236\344\274\275/2023-05-12\347\273\231\350\267\257\347\224\261\347\224\250\347\232\204\346\225\260\347\273\204.md" "b/38\351\231\210\344\277\236\344\274\275/2023-05-12\347\273\231\350\267\257\347\224\261\347\224\250\347\232\204\346\225\260\347\273\204.md"
new file mode 100644
index 0000000..e00ea30
--- /dev/null
+++ "b/38\351\231\210\344\277\236\344\274\275/2023-05-12\347\273\231\350\267\257\347\224\261\347\224\250\347\232\204\346\225\260\347\273\204.md"
@@ -0,0 +1,70 @@
+```vue
+function convertPath(arr, parentPath) {
+    // 定义一个空数组
+    let list = [];
+
+    // 处理第一个路由
+    arr.forEach(item => {
+        let tmp = {
+            path: item.path,
+            meta: item.meta ? item.meta : { icon: 'setting', title: '不知道的标题' }
+        }
+        // console.log(parentPath);
+        // 就是当传入的路径path不为空时，就将其叠加到
+        if (parentPath && tmp.path) {
+            // console.log('999');
+            tmp.path = parentPath + '/' + tmp.path
+        }
+
+        // 当有下级节点时，递归调用convertPath函数，传入下级路由（是个数组），并且传入当前路由的路径
+        if (item.children && item.children.length > 0) {
+            let children = convertPath(item.children, item.path)
+            if (children.length > 0) {
+                tmp.children = children
+            }
+        }
+
+
+
+        // 将处理好的路由插入到空数组中
+        list.push(tmp)
+    })
+
+    return list;
+}
+
+function processHidden(arr) {
+    let list = [];
+    arr.forEach(item => {
+        let obj = ''
+        // 特殊处理，指当前菜单项标识隐藏的时候，则将其下级菜单项的第一个，提取为显示的菜单
+        if (item.meta && item.meta.hidden && item.children && item.children.length > 0) {
+            let children = item.children[0]
+            obj = children
+        } else {
+            obj = item
+        }
+
+        // 再对可能path为空的情况下处理下下
+        if (!obj.path) {
+            obj.path = '/'
+        }
+        list.push(obj)
+    })
+
+    return list;
+}
+
+// 将导入进来的路由，转换成菜单数据
+const menus = computed(() => {
+    //1、将导入的路由数据转换一下，以使下级path带上上级path，以便组成完成的路由路径
+    let list = convertPath(routes, '')
+    // console.log(list);
+
+    let menuList = processHidden(list)
+
+    // console.log(menuList);
+    //2、返回处理好的菜单栏数据
+    return menuList
+})
+```
\ No newline at end of file
-- 
Gitee