From f8d633832a387ac022a1e049aeb714e472ea4eb8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E8=83=A1?= <515696146@qq.com> Date: Sun, 14 May 2023 21:55:13 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B0=8F=E9=BB=91=E5=AD=90=E6=B2=A1=E7=B4=A0?= =?UTF-8?q?=E8=B4=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...52\346\240\217\350\275\254\346\215\242.md" | 76 +++++++ .../230504-elementPlus.md" | 0 ...17\347\232\204\345\260\201\350\243\205.md" | 0 ...57\347\224\261\346\230\276\347\244\272.md" | 203 ++++++++++++++++++ ...ss\347\232\204\346\240\267\345\274\217.md" | 57 +++++ ...54\346\215\242\350\267\257\347\224\261.md" | 84 ++++++++ 6 files changed, 420 insertions(+) create mode 100644 "05\345\210\230\350\203\241/2305011-\345\257\274\350\210\252\346\240\217\350\275\254\346\215\242.md" rename "05\345\210\230\350\203\241/230504elementPlus.md" => "05\345\210\230\350\203\241/230504-elementPlus.md" (100%) rename "05\345\210\230\350\203\241/230507elmentPlus\350\217\234\345\215\225\346\240\217\347\232\204\345\260\201\350\243\205.md" => "05\345\210\230\350\203\241/230507-elmentPlus\350\217\234\345\215\225\346\240\217\347\232\204\345\260\201\350\243\205.md" (100%) create mode 100644 "05\345\210\230\350\203\241/230508-\350\267\257\347\224\261\346\230\276\347\244\272.md" create mode 100644 "05\345\210\230\350\203\241/230509-css\347\232\204\346\240\267\345\274\217.md" create mode 100644 "05\345\210\230\350\203\241/230512-\350\275\254\346\215\242\350\267\257\347\224\261.md" diff --git "a/05\345\210\230\350\203\241/2305011-\345\257\274\350\210\252\346\240\217\350\275\254\346\215\242.md" "b/05\345\210\230\350\203\241/2305011-\345\257\274\350\210\252\346\240\217\350\275\254\346\215\242.md" new file mode 100644 index 0000000..cd6f56c --- /dev/null +++ "b/05\345\210\230\350\203\241/2305011-\345\257\274\350\210\252\346\240\217\350\275\254\346\215\242.md" @@ -0,0 +1,76 @@ + +# 排除一下主页面的路由，使其不会出现在菜单栏 + +## 步骤 + ++ 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 diff --git "a/05\345\210\230\350\203\241/230504elementPlus.md" "b/05\345\210\230\350\203\241/230504-elementPlus.md" similarity index 100% rename from "05\345\210\230\350\203\241/230504elementPlus.md" rename to "05\345\210\230\350\203\241/230504-elementPlus.md" diff --git "a/05\345\210\230\350\203\241/230507elmentPlus\350\217\234\345\215\225\346\240\217\347\232\204\345\260\201\350\243\205.md" "b/05\345\210\230\350\203\241/230507-elmentPlus\350\217\234\345\215\225\346\240\217\347\232\204\345\260\201\350\243\205.md" similarity index 100% rename from "05\345\210\230\350\203\241/230507elmentPlus\350\217\234\345\215\225\346\240\217\347\232\204\345\260\201\350\243\205.md" rename to "05\345\210\230\350\203\241/230507-elmentPlus\350\217\234\345\215\225\346\240\217\347\232\204\345\260\201\350\243\205.md" diff --git "a/05\345\210\230\350\203\241/230508-\350\267\257\347\224\261\346\230\276\347\244\272.md" "b/05\345\210\230\350\203\241/230508-\350\267\257\347\224\261\346\230\276\347\244\272.md" new file mode 100644 index 0000000..559e25e --- /dev/null +++ "b/05\345\210\230\350\203\241/230508-\350\267\257\347\224\261\346\230\276\347\244\272.md" @@ -0,0 +1,203 @@ +# 导航栏的收展和路由的显示 + +## 一.导航栏的收展: collapse + ++ collapse 属性：判断是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）,默认值是falas + ++ 在父组件中判断其是否要折叠 + +### 代码: + ++ Nav.vue +```vue + + + +``` + ++ HelloWorld.vue +```vue + + + + + + +``` +![2](./img/230508/2.png) +![3](./img/230508/3.png) + +# +## 二.路由的显示 + +### 使用嵌套路由: chilrden + ++ router.js :在路由文件中部署 +```js +const routes=[ + { + path:'/', + component:HelloWorld, + children:[ + { + path:'/chicken', + component:Chicken + },{ + path:'/burger', + component:Burger + },{ + path:'/food', + component:Food + },{ + path:'/hotwater', + component:HotWater + },{ + path:'/icetea', + component:IceTea + },{ + path:'/zoon', + component:Zoon + } + ] + } +] +``` + ++ 在组件中插入出口 +```vue + + + +``` ++ 在子组件中使用对应得入口或编程式导航 +```vue + + + + +``` + +### 图片的导入 + ++ <**el-image :src="url" :fit="" lazy**><**/el-image**> 组件导入图片 + ++ **:fit=""** 是图片显示比例的设置 +![1](./img/230508/1.png) + ++ lazy :开启懒加载功能， 当图片滚动到可视范围内才会加载 + +![4](./img/230508/4.png) \ No newline at end of file diff --git "a/05\345\210\230\350\203\241/230509-css\347\232\204\346\240\267\345\274\217.md" "b/05\345\210\230\350\203\241/230509-css\347\232\204\346\240\267\345\274\217.md" new file mode 100644 index 0000000..506fe93 --- /dev/null +++ "b/05\345\210\230\350\203\241/230509-css\347\232\204\346\240\267\345\274\217.md" @@ -0,0 +1,57 @@ +# Css样式 + +```vue + +``` \ No newline at end of file diff --git "a/05\345\210\230\350\203\241/230512-\350\275\254\346\215\242\350\267\257\347\224\261.md" "b/05\345\210\230\350\203\241/230512-\350\275\254\346\215\242\350\267\257\347\224\261.md" new file mode 100644 index 0000000..1121d6b --- /dev/null +++ "b/05\345\210\230\350\203\241/230512-\350\275\254\346\215\242\350\267\257\347\224\261.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 -- Gitee