From 65f83655868c8da8a29926cdc0647034f107ceb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E9=83=81=E9=BD=90?= <2050634948@qq.com>
Date: Sun, 14 May 2023 14:28:53 +0000
Subject: [PATCH] 1
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 王郁齐 <2050634948@qq.com>
---
 .../20230508_\350\276\271\346\241\206.md"     | 116 ++++++++++++++++++
 .../20230509_css.md"                          |  57 +++++++++
 .../20230511_\345\257\274\350\210\252.md"     |  84 +++++++++++++
 ...54\346\215\242\350\267\257\347\224\261.md" |  75 +++++++++++
 4 files changed, 332 insertions(+)
 create mode 100644 "46\347\216\213\351\203\201\351\275\220/20230508_\350\276\271\346\241\206.md"
 create mode 100644 "46\347\216\213\351\203\201\351\275\220/20230509_css.md"
 create mode 100644 "46\347\216\213\351\203\201\351\275\220/20230511_\345\257\274\350\210\252.md"
 create mode 100644 "46\347\216\213\351\203\201\351\275\220/20230512_\350\275\254\346\215\242\350\267\257\347\224\261.md"

diff --git "a/46\347\216\213\351\203\201\351\275\220/20230508_\350\276\271\346\241\206.md" "b/46\347\216\213\351\203\201\351\275\220/20230508_\350\276\271\346\241\206.md"
new file mode 100644
index 0000000..918c843
--- /dev/null
+++ "b/46\347\216\213\351\203\201\351\275\220/20230508_\350\276\271\346\241\206.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>
+```
\ No newline at end of file
diff --git "a/46\347\216\213\351\203\201\351\275\220/20230509_css.md" "b/46\347\216\213\351\203\201\351\275\220/20230509_css.md"
new file mode 100644
index 0000000..381eafe
--- /dev/null
+++ "b/46\347\216\213\351\203\201\351\275\220/20230509_css.md"
@@ -0,0 +1,57 @@
+# Css样式
+
+```vue
+<style scoped>
+/* 侧边的样式 */
+.el-aside{
+  background-color: #b4c0cc;
+  /* 撑开 */
+  height:calc(100vh);
+
+/* overflow:hidden作用是当元素内的内容溢出的时候使它隐藏溢出的部分，即超出部分隐藏。 */
+  overflow: hidden;
+}
+
+/* 顶部样式 */
+.el-header{
+  background-color: rgb(101, 94, 101);
+  /* 设置居中 */
+  display: flex;
+  align-items: center;
+  /* ustify-content：项目在主轴上的对齐方式；
+  space-between：两端对齐，项目之间的间隔都相等 */
+   justify-content: space-between;
+}
+
+/* 主内容的样式 */
+.el-main{
+  background-color: gray;
+}
+
+/* 底部的样式 */
+.el-footer{
+background-color: rgb(44, 45, 42);
+
+/* 弹性布局 */
+display: flex;
+
+    /* flex-direction:  决定主轴的方向（即项目的排列方向） */
+    /* column：主轴为垂直方向，起点在上沿。 */
+    flex-direction: column;
+
+    /*  !important 规则用于增加样式的权重，使使用的样式具有最高优先级(优先于内联样式、内部样式)。 */
+    color: white !important;
+}
+
+/* 图标的样式 */
+.collapseIcon{
+  /* 旋转 */
+  /* 180 */
+  transform:rotate(180deg)
+}
+.collapseIcons{
+  /* 旋转90度 */
+  transform:rotate(90deg)
+}
+</style>
+```
\ No newline at end of file
diff --git "a/46\347\216\213\351\203\201\351\275\220/20230511_\345\257\274\350\210\252.md" "b/46\347\216\213\351\203\201\351\275\220/20230511_\345\257\274\350\210\252.md"
new file mode 100644
index 0000000..422b8c9
--- /dev/null
+++ "b/46\347\216\213\351\203\201\351\275\220/20230511_\345\257\274\350\210\252.md"
@@ -0,0 +1,84 @@
+# 路由数据转换成菜单栏数据
+
+## 一.步骤
+
++ 1、将导入的路由数据转换一下，以使下级path带上上级path，以便组成完成的路由路径
+    
+    + a. 将导入的路由数据转换一下，以使下级path带上上级path，以便组成完成的路由路径
+
+    + b. 定义一个空数组,用于存储处理好的路由
+
+    + c. 循环遍历传进的数组，处理每一个路由
+
+        + (1). 定义一个对象，存储需要的数据
+
+        + (2). 判断传传入的上级节点的路径path是否为空同时原来的路径是否为空，进行相关的处理
+
+        + (3). 判断是否有下级节点，递归调用converPath 函数,进行相关处理
+
+        + (4). 将处理好的路由插入到空的数组中
+    
+    + d. 返回定义的存储变量
+
++ 2.排除一下主页面的路由，使其不会出现在菜单栏(请看下一个笔记)
+
++ 3.返回处理好的菜单栏数据
+
+```js
+// 使用计算属性，将导入的路由，转换成菜单栏数据
+const menus = computed(() => {
+    //1、将导入的路由数据转换一下，以使下级path带上上级path，以便组成完成的路由路径
+    let list = converPath(routes, '')
+
+    // 2.排除一下主页面的路由，使其不会出现在菜单栏
+    let menuList=processHidden(list)
+
+    // 3.返回处理好的菜单栏数据
+    return menuList
+})
+```
+
+#
+## 二.代码
+```js
+//将导入的路由数据转换一下，以使下级path带上上级path，以便组成完成的路由路径
+// 暴露方法
+export function converPath(arr, parentPath) {
+    //定义一个空数组
+    let list = [];
+
+    // 处理每一个路由
+    arr.forEach(item=>{
+
+        // 定义一个对象
+        let tmp={
+            path:item.path,
+            men:item.men?item.men:{title:'标题',icon:'setting'}
+        }
+
+        // 当传入的上级节点的路径path不为空同时原来的路径也不为空时，就叠加
+        if(parentPath && tmp.path){
+            if(parentPath==='/'){
+                tmp.path=parentPath+tmp.path
+            }else{
+                tmp.path=parentPath+'/'+tmp.path
+            }
+        }
+
+        // 判断是否有下级节点，递归调用converPath 函数
+        if (item.children && item.children.length > 0) {
+            // 传入下级路由（是个数组），并且传入当前路由的路径
+            let children=converPath(item.children,item.path)
+
+            if(children.length>0){
+                tmp.children=children
+            }
+        }
+
+        //将处理好的路由插入到空的数组中
+        list.push(tmp)
+    })
+    
+    return list
+}
+```
\ No newline at end of file
diff --git "a/46\347\216\213\351\203\201\351\275\220/20230512_\350\275\254\346\215\242\350\267\257\347\224\261.md" "b/46\347\216\213\351\203\201\351\275\220/20230512_\350\275\254\346\215\242\350\267\257\347\224\261.md"
new file mode 100644
index 0000000..a32ed30
--- /dev/null
+++ "b/46\347\216\213\351\203\201\351\275\220/20230512_\350\275\254\346\215\242\350\267\257\347\224\261.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