From f2146f9628e7c58b1cb9a6c58e5ce7720656248e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=AB=A5=E4=B9=90=E4=B9=90?= <3058025690@qq.com>
Date: Sun, 7 May 2023 21:35:16 +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

---
 ...lm\350\207\252\351\200\202\345\272\224.md" |  99 ++++++++++++++
 ...05\345\257\274\350\210\252\346\240\217.md" | 128 ++++++++++++++++++
 2 files changed, 227 insertions(+)
 create mode 100644 "11\347\253\245\344\271\220\344\271\220/23-5.04_elm\350\207\252\351\200\202\345\272\224.md"
 create mode 100644 "11\347\253\245\344\271\220\344\271\220/23-5.05_\345\260\201\350\243\205\345\257\274\350\210\252\346\240\217.md"

diff --git "a/11\347\253\245\344\271\220\344\271\220/23-5.04_elm\350\207\252\351\200\202\345\272\224.md" "b/11\347\253\245\344\271\220\344\271\220/23-5.04_elm\350\207\252\351\200\202\345\272\224.md"
new file mode 100644
index 0000000..62bb0a9
--- /dev/null
+++ "b/11\347\253\245\344\271\220\344\271\220/23-5.04_elm\350\207\252\351\200\202\345\272\224.md"
@@ -0,0 +1,99 @@
+# el 布局
+## 一.Container 布局容器
+<el-container>：外层容器。 当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列， 否则会水平左右排列。
+
+<el-header>：顶栏容器。
+
+<el-aside>：侧边栏容器。
+
+<el-main>：主要区域容器。
+
+<el-footer>：底栏容器
+
+在 <style scopend> 中，设置 height:calc(100vh) 可以使样式自适应撑开
+```
+<template>
+  <div>
+    <!-- el-container 外层容器。 -->
+  <el-container>
+    <!-- 侧边栏容器 -->
+    <el-aside class="aside"><Nav></Nav></el-aside>
+    <el-container>
+      <!-- 顶栏容器 -->
+      <el-header class="header">Header</el-header>
+      <!-- 主要区域容器 -->
+      <el-main class="main">
+        <RouterView></RouterView>
+      </el-main>
+      <!-- 底栏容器 -->
+      <el-footer class="footer">Footer</el-footer>
+    </el-container>
+  </el-container>
+  </div>
+</template>
+<script setup>
+import Nav from './Nav.vue'
+</script>
+<style scopend>
+/* 测边栏的样式 */
+.aside{
+  background-color: rgb(163, 214, 104);
+  /* 自适应 */
+  height: calc(100vh);
+}
+/* 顶栏样式 */
+.header{
+  background-color: aqua;
+}
+/* 底栏样式 */
+.footer{
+  background-color: rgb(82, 72, 72);
+  height: 500px;
+}
+</style>
+```
+### el-menu 导航栏设置
+<el-menu-item-group> 组件可以实现菜单进行分组，分组名可以通过 title 属性直接设定，也可以通过具名 slot 来设定。
+```
+<template>
+
+        <h5>导航栏</h5>
+    <el-menu>
+        <el-sub-menu index="1">
+            <!-- 可以在下拉框的头显示 -->
+            <template #title>
+                <span>路由导航</span>
+            </template>
+            
+            <el-menu-item-group title="路由">
+            <el-menu-item index="1-1" @click="fn">Users</el-menu-item>
+            <el-menu-item index="1-2" @click="fns">Student</el-menu-item>
+          </el-menu-item-group>
+        </el-sub-menu>
+
+        <el-menu-item index="2">
+            <span>
+                <RouterLink to="/users">Users</RouterLink>
+            </span>
+        </el-menu-item>
+
+        <el-menu-item index="3">
+            <span>
+                <RouterLink to="/student">Student</RouterLink>
+            </span>
+        </el-menu-item>
+    </el-menu>
+    
+</template>
+
+<script setup>
+import {useRouter} from 'vue-router'
+const router=useRouter();
+const fn=function(){
+    router.push({path:'/users'})
+}
+const fns=function(){
+    router.push({path:'/student'})
+}
+</script>
+```
\ No newline at end of file
diff --git "a/11\347\253\245\344\271\220\344\271\220/23-5.05_\345\260\201\350\243\205\345\257\274\350\210\252\346\240\217.md" "b/11\347\253\245\344\271\220\344\271\220/23-5.05_\345\260\201\350\243\205\345\257\274\350\210\252\346\240\217.md"
new file mode 100644
index 0000000..d536274
--- /dev/null
+++ "b/11\347\253\245\344\271\220\344\271\220/23-5.05_\345\260\201\350\243\205\345\257\274\350\210\252\346\240\217.md"
@@ -0,0 +1,128 @@
+## 导航栏的封装
+### 标签
+最外面一层是由 <el-menu> </el-menu> 标签 包裹
+
+一级导航栏: 用 <el-menu-item> </el-menu-item> 标签 包裹
+
+一级导航栏下的子导航栏:用 <el-sub-menu></el-sub-menu> 标签包裹
+
+<el-menu-item-group> 组件可以实现菜单进行分组，分组名可以通过title属性直接设定，也可以通过具名 slot 来设定
+
+根据 index 可以限制收起和展开
+
+### 代码
+
+```
+<template>
+    <div>
+        <el-menu>
+            <template v-for="menu of menus">
+                <!-- 判断是否有嵌套 -->
+                <!-- 
+                    @open：展开对应的 index 
+                    @close: 关闭对应的 index
+
+                    有对应的index 也可以控制展开和关闭
+                 -->
+                <el-sub-menu 
+                    v-if="menu.children && menu.children.length>0"
+                    :index="i++"
+                >
+                    <template #title>
+                        <span>{{ menu.title }}</span>
+                    </template>
+                    <!-- 因为里面有嵌套，所以继续执行该组件 -->
+                    <Navs :menus="menu.children"></Navs>
+                </el-sub-menu>
+
+                <!-- 没有嵌套执行 -->
+                <el-menu-item v-else>
+                    {{ menu.title }}
+                </el-menu-item>
+            </template>
+        </el-menu>
+    </div>
+</template>
+
+<script setup>
+import {ref} from 'vue'
+
+// 设置一个判断收起和展开的变量
+const i=ref(0)
+
+// 将变量抛出
+const props=defineProps(['menus'])
+</script>
+```
+```
+<template>
+    <div>
+        <el-container>
+            <!-- 侧边栏 -->
+            <el-aside>
+                <!-- <Nav></Nav> -->
+                <Navs :menus="menus"></Navs>
+            </el-aside>
+
+            <!-- 容器 -->
+            <el-container>
+                <!-- 顶栏 -->
+                <el-header class="el-header"></el-header>
+
+                <!-- 主内容 -->
+                <el-main></el-main>
+
+                <!-- 底栏 -->
+                <el-footer class="el-footer"></el-footer>
+            </el-container>
+        </el-container>
+    </div>
+</template>
+<script setup>
+import Nav from './Nav.vue';
+import Navs from './Nav/Navs.vue';
+
+const menus = [
+    {
+        title: '1111',
+        children: [
+            {
+                title: '2222'
+            }, {
+                title: '3333'
+            }
+        ]
+    }, {
+        title: '4444'
+    }, {
+        title: '5555',
+        children: [
+            {
+                title: '6666'
+            }, {
+                title: '7777',
+                children: [
+                    {
+                        title: '8888'
+                    }, {
+                        title: '9999'
+                    }
+                ]
+            }
+        ]
+    }
+]
+</script>
+<style scoped>
+.el-aside{
+    background-color: aqua;
+    height: calc(100vh);
+}
+.el-header{
+    background-color: blue;
+}
+.el-footer{
+    background-color: yellow;
+}
+</style>
+```
\ No newline at end of file
-- 
Gitee