From d9f2bb0ee107cb99324a82ec286533997794b96f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9C=E9=99=88=E4=BF=8A=E5=85=B4=E2=80=9D?=
 <“1274804914@qq.com”>
Date: Sun, 14 May 2023 21:22:39 +0800
Subject: [PATCH] 123

---
 .../20230508-\345\270\203\345\261\200.md"     | 116 ++++++++++++++++++
 .../20230509-icon\345\233\276\346\240\207.md" |  13 ++
 ...0230511-layout\345\270\203\345\261\200.md" |  30 +++++
 .../20230512-menu\350\217\234\345\215\225.md" |  16 +++
 4 files changed, 175 insertions(+)
 create mode 100644 "07\351\231\210\344\277\212\345\205\264/20230508-\345\270\203\345\261\200.md"
 create mode 100644 "07\351\231\210\344\277\212\345\205\264/20230509-icon\345\233\276\346\240\207.md"
 create mode 100644 "07\351\231\210\344\277\212\345\205\264/20230511-layout\345\270\203\345\261\200.md"
 create mode 100644 "07\351\231\210\344\277\212\345\205\264/20230512-menu\350\217\234\345\215\225.md"

diff --git "a/07\351\231\210\344\277\212\345\205\264/20230508-\345\270\203\345\261\200.md" "b/07\351\231\210\344\277\212\345\205\264/20230508-\345\270\203\345\261\200.md"
new file mode 100644
index 0000000..ac3ea8d
--- /dev/null
+++ "b/07\351\231\210\344\277\212\345\205\264/20230508-\345\270\203\345\261\200.md"
@@ -0,0 +1,116 @@
+```
+<template>
+  <div class="common-layout">
+    <el-container>
+      <el-aside width="200px">
+        <Navbar :is-collapse="isCollapse" :menus="menuList"></Navbar>
+      </el-aside>
+      <el-container>
+        <el-header>
+          <el-icon :class="{ rotateClass: isCollapse }" :size="30" @click="iconClickHandler">
+            <fold></fold>
+          </el-icon>
+        </el-header>
+        <el-main>
+          <div class="inline-flex" :style="obj">
+
+          </div>
+        </el-main>
+        <el-footer>Footer</el-footer>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+<script setup>
+import { ref, reactive } from 'vue';
+import Navbar from './components/Navbar.vue';
+
+const isCollapse = ref(false)
+const menuList = reactive([
+  {
+    title: '系统管理',
+    meta: { icon: 'setting' },
+    children: [
+      {
+        title: '用户管理',
+        meta: { icon: 'User' }
+      },
+      {
+        title: '角色管理',
+        meta: { icon: 'Grid' }
+      },
+      {
+        title: '权限管理',
+        meta: { icon: 'Promotion' }
+      },
+      {
+        title: '部门管理',
+        meta: { icon: 'HelpFilled' },
+        children: [
+          {
+            title: '销售部',
+            meta: { icon: 'user' }
+          },
+          {
+            title: '研发部',
+            meta: { icon: 'user' }
+          },
+          {
+            title: '财务部',
+            meta: { icon: 'user' },
+            children: [
+              {
+                title: '出纳'
+              },
+              {
+                title: '会计',
+
+              },
+              {
+                title: '财务总监'
+              },
+            ]
+          },
+        ]
+      },
+    ]
+  }, {
+    title: '学生管理',
+    meta: { icon: 'setting' }
+  }
+])
+const obj = reactive({ boxShadow: 'var("--el-box-shadow-dark")', height: '30px', width: '30px', backgroundColor: 'black' })
+
+
+const iconClickHandler = function () {
+  console.log('888');
+  isCollapse.value = !isCollapse.value
+}
+</script>
+<style scoped>
+.el-aside {
+  background-color: white;
+  height: calc(100vh);
+  /* flex: 2 2 auto; */
+}
+
+.el-header {
+  width: 600px;
+  background-color: red;
+  display: flex;
+  align-items: center;
+}
+
+.el-main {
+  background-color: blue;
+}
+
+.el-footer {
+  background-color: #A3A6AD;
+}
+
+.rotateClass {
+  transform: rotate(-90deg);
+}
+</style>
+```
diff --git "a/07\351\231\210\344\277\212\345\205\264/20230509-icon\345\233\276\346\240\207.md" "b/07\351\231\210\344\277\212\345\205\264/20230509-icon\345\233\276\346\240\207.md"
new file mode 100644
index 0000000..268ed3d
--- /dev/null
+++ "b/07\351\231\210\344\277\212\345\205\264/20230509-icon\345\233\276\346\240\207.md"
@@ -0,0 +1,13 @@
+```
+<template>
+    <div>
+        <el-menu :collapse="isCollapse">
+            <NavbarItem :itemMenus="menus"></NavbarItem>
+        </el-menu>
+    </div>
+</template>
+<script setup>
+const props = defineProps(['menus','isCollapse'])
+import NavbarItem from './NavbarItem.vue'
+</script>
+```
diff --git "a/07\351\231\210\344\277\212\345\205\264/20230511-layout\345\270\203\345\261\200.md" "b/07\351\231\210\344\277\212\345\205\264/20230511-layout\345\270\203\345\261\200.md"
new file mode 100644
index 0000000..a4de556
--- /dev/null
+++ "b/07\351\231\210\344\277\212\345\205\264/20230511-layout\345\270\203\345\261\200.md"
@@ -0,0 +1,30 @@
+```
+<template>
+        <!-- 遍历传入的菜单数组 -->
+        <template v-for="menu in itemMenus">
+            <!-- 当前菜单对象如果有下级菜单，即有children属性，并且children的长度大于0，则需要使用组件中的子菜单组件el-sub-menu -->
+            <el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.title">
+                <template #title>
+                    <el-icon>
+                        <component v-if="menu.meta && menu.meta.icon" :is="menu.meta.icon"></component>
+                        <setting v-else></setting>
+                    </el-icon>
+                    {{ menu.title }}
+                </template>
+                <!-- 重复自己 -->
+                <NavbarItem :item-menus="menu.children"></NavbarItem>
+            </el-sub-menu>
+            <el-menu-item v-else :index="menu.title">
+                <el-icon>
+                    <component v-if="menu.meta && menu.meta.icon" :is="menu.meta.icon"></component>
+                    <setting v-else></setting>
+                </el-icon>
+                {{ menu.title }}
+            </el-menu-item>
+        </template>
+</template>
+<script setup>
+const props = defineProps(['itemMenus'])
+
+</script>
+```
diff --git "a/07\351\231\210\344\277\212\345\205\264/20230512-menu\350\217\234\345\215\225.md" "b/07\351\231\210\344\277\212\345\205\264/20230512-menu\350\217\234\345\215\225.md"
new file mode 100644
index 0000000..802675b
--- /dev/null
+++ "b/07\351\231\210\344\277\212\345\205\264/20230512-menu\350\217\234\345\215\225.md"
@@ -0,0 +1,16 @@
+```
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import  ElementPlus  from 'element-plus'
+import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+
+const app = createApp(App)
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+
+app.use(ElementPlus)
+app.mount('#app')
+```
-- 
Gitee