From da75856d864ffa3af333745663ee536055862630 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=96=8C?= <2339620977@qq.com>
Date: Sun, 14 May 2023 22:37:48 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AC=94=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...11\350\217\234\345\215\225\346\240\217.md" | 173 ++++++++++++++++++
 .../20230509-image.md"                        |   2 +
 .../20230511-\350\267\257\347\224\261.md"     |   5 +
 ...42\350\217\234\345\215\225\346\240\217.md" |  70 +++++++
 4 files changed, 250 insertions(+)
 create mode 100644 "39\345\210\230\346\226\214/20230508-\345\233\276\346\240\207\346\227\213\350\275\254\344\270\213\346\213\211\350\217\234\345\215\225\346\240\217.md"
 create mode 100644 "39\345\210\230\346\226\214/20230509-image.md"
 create mode 100644 "39\345\210\230\346\226\214/20230511-\350\267\257\347\224\261.md"
 create mode 100644 "39\345\210\230\346\226\214/20230512-\346\212\212\350\267\257\347\224\261\350\275\254\346\215\242\350\217\234\345\215\225\346\240\217.md"

diff --git "a/39\345\210\230\346\226\214/20230508-\345\233\276\346\240\207\346\227\213\350\275\254\344\270\213\346\213\211\350\217\234\345\215\225\346\240\217.md" "b/39\345\210\230\346\226\214/20230508-\345\233\276\346\240\207\346\227\213\350\275\254\344\270\213\346\213\211\350\217\234\345\215\225\346\240\217.md"
new file mode 100644
index 0000000..7757b49
--- /dev/null
+++ "b/39\345\210\230\346\226\214/20230508-\345\233\276\346\240\207\346\227\213\350\275\254\344\270\213\346\213\211\350\217\234\345\215\225\346\240\217.md"
@@ -0,0 +1,173 @@
+~~~js
+<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/39\345\210\230\346\226\214/20230509-image.md" "b/39\345\210\230\346\226\214/20230509-image.md"
new file mode 100644
index 0000000..fd977c7
--- /dev/null
+++ "b/39\345\210\230\346\226\214/20230509-image.md"
@@ -0,0 +1,2 @@
+### Image
+<el-image src='这里写图片路径'></el-image>
\ No newline at end of file
diff --git "a/39\345\210\230\346\226\214/20230511-\350\267\257\347\224\261.md" "b/39\345\210\230\346\226\214/20230511-\350\267\257\347\224\261.md"
new file mode 100644
index 0000000..6060da7
--- /dev/null
+++ "b/39\345\210\230\346\226\214/20230511-\350\267\257\347\224\261.md"
@@ -0,0 +1,5 @@
+### 懒加载
+import Index from './components/index.vue'
+
+// 这个Index等于
+()=>import('./components/index.vue')
\ No newline at end of file
diff --git "a/39\345\210\230\346\226\214/20230512-\346\212\212\350\267\257\347\224\261\350\275\254\346\215\242\350\217\234\345\215\225\346\240\217.md" "b/39\345\210\230\346\226\214/20230512-\346\212\212\350\267\257\347\224\261\350\275\254\346\215\242\350\217\234\345\215\225\346\240\217.md"
new file mode 100644
index 0000000..e44d3a4
--- /dev/null
+++ "b/39\345\210\230\346\226\214/20230512-\346\212\212\350\267\257\347\224\261\350\275\254\346\215\242\350\217\234\345\215\225\346\240\217.md"
@@ -0,0 +1,70 @@
+~~~js
+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