From 5803d08257e6d8412581b3860871a764db697d32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=81=E4=BC=9F=E5=B3=B0?= <1103490369@qq.com>
Date: Sun, 14 May 2023 22:32:50 +0800
Subject: [PATCH] 111

---
 ...66\350\217\234\345\215\225\346\240\217.md" | 173 ++++++++++++++++++
 .../20230509-Icon\345\233\276\346\240\207.md" |   0
 ...42\345\257\274\350\210\252\346\240\217.md" |   0
 ...57\347\224\261\350\275\254\346\215\242.md" |  75 ++++++++
 4 files changed, 248 insertions(+)
 create mode 100644 "43\344\270\201\344\274\237\345\263\260/20230508-\345\233\276\346\240\207\346\227\213\350\275\254\346\224\266\350\217\234\345\215\225\346\240\217.md"
 create mode 100644 "43\344\270\201\344\274\237\345\263\260/20230509-Icon\345\233\276\346\240\207.md"
 create mode 100644 "43\344\270\201\344\274\237\345\263\260/20230511-\350\267\257\347\224\261\346\225\260\346\215\256\350\275\254\346\215\242\345\257\274\350\210\252\346\240\217.md"
 create mode 100644 "43\344\270\201\344\274\237\345\263\260/20230512-\346\216\222\351\231\244\344\270\273\351\241\265\351\235\242\350\267\257\347\224\261\350\275\254\346\215\242.md"

diff --git "a/43\344\270\201\344\274\237\345\263\260/20230508-\345\233\276\346\240\207\346\227\213\350\275\254\346\224\266\350\217\234\345\215\225\346\240\217.md" "b/43\344\270\201\344\274\237\345\263\260/20230508-\345\233\276\346\240\207\346\227\213\350\275\254\346\224\266\350\217\234\345\215\225\346\240\217.md"
new file mode 100644
index 0000000..587f585
--- /dev/null
+++ "b/43\344\270\201\344\274\237\345\263\260/20230508-\345\233\276\346\240\207\346\227\213\350\275\254\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/43\344\270\201\344\274\237\345\263\260/20230509-Icon\345\233\276\346\240\207.md" "b/43\344\270\201\344\274\237\345\263\260/20230509-Icon\345\233\276\346\240\207.md"
new file mode 100644
index 0000000..e69de29
diff --git "a/43\344\270\201\344\274\237\345\263\260/20230511-\350\267\257\347\224\261\346\225\260\346\215\256\350\275\254\346\215\242\345\257\274\350\210\252\346\240\217.md" "b/43\344\270\201\344\274\237\345\263\260/20230511-\350\267\257\347\224\261\346\225\260\346\215\256\350\275\254\346\215\242\345\257\274\350\210\252\346\240\217.md"
new file mode 100644
index 0000000..e69de29
diff --git "a/43\344\270\201\344\274\237\345\263\260/20230512-\346\216\222\351\231\244\344\270\273\351\241\265\351\235\242\350\267\257\347\224\261\350\275\254\346\215\242.md" "b/43\344\270\201\344\274\237\345\263\260/20230512-\346\216\222\351\231\244\344\270\273\351\241\265\351\235\242\350\267\257\347\224\261\350\275\254\346\215\242.md"
new file mode 100644
index 0000000..975d62f
--- /dev/null
+++ "b/43\344\270\201\344\274\237\345\263\260/20230512-\346\216\222\351\231\244\344\270\273\351\241\265\351\235\242\350\267\257\347\224\261\350\275\254\346\215\242.md"
@@ -0,0 +1,75 @@
+# 排除一下主页面的路由，使其不会出现在菜单栏
+
+## 步骤
+
++ 1、将导入的路由数据转换一下，以使下级path带上上级path，以便组成完成的路由路径(请看上个笔记)
+
++ 2.排除一下主页面的路由，使其不会出现在菜单栏
+
+    + a.  将导入的路由中的主页从菜单栏数据排除
+
+    + b. 定义一个空数组,用于存储处理好的路由
+
+    + c. 循环遍历传进的数组，处理每一个路由
+
+        + (1). 定义一个对象，存储需要的数据
+
+        + (2). 特殊处理，指当前菜单项标识隐藏的时候，则将其下级菜单项的第一个，提取为显示的菜单
+
+        + (3). 判断当path为空时,进行相关的操作
+
+        + (4). 将处理好的路由插入到空的数组中
+    
+    + d. 返回定义的存储变量
+
+
++ 3.返回处理好的菜单栏数据
+
+```js
+// 使用计算属性，将导入的路由，转换成菜单栏数据
+const menus = computed(() => {
+    //1、将导入的路由数据转换一下，以使下级path带上上级path，以便组成完成的路由路径
+    let list = converPath(routes, '')
+
+    // 2.排除一下主页面的路由，使其不会出现在菜单栏
+    let menuList=processHidden(list)
+
+    // 3.返回处理好的菜单栏数据
+    return menuList
+})
+```
+
+#
+## 代码
+```js
+// 将导入的路由中的主页从菜单栏数据排除
+// 暴露方法
+export function processHidden(arr){
+    let list=[]
+
+    arr.forEach(item=>{
+        let obj=''
+
+        // 特殊处理，指当前菜单项标识隐藏的时候，则将其下级菜单项的第一个，提取为显示的菜单
+        if(item.men && item.men.hidden && item.children && item.children.length){
+            // 获取下级的第一个数据
+            let children=item.children[0]
+            // 将数据输出
+            obj=children
+        }else{
+            // 
+            obj=item
+        }
+
+        // 判断当path为空时
+        if(!obj.path){
+            obj.path='/'
+        }
+
+        // 将处理后的路由赋值
+        list.push(obj)
+    })
+
+    return list
+}
+```
\ No newline at end of file
-- 
Gitee