vue3:十一、主页面布局(修改顶部导航栏样式-左侧，页面名称设置)

一、效果

1、初始效果

2、完成效果

二、实现

1、将展开/收缩文字按钮换成图标

(1)图标查询，可参照Element官网

Icon 图标 | Element Plus

(2)复制收缩和展开图标到页面

替换掉之前的文字按钮

(3)增加图标样式

给图标增加class样式，设置图标大小为18，设置展开与收缩图标的展现时机

增加鼠标经过样式,内边距 ,inline-flex布局(避免占据一整行问题),圆角，经过时背景色

display布局：

属性值	行为	子元素布局
inline	行内元素，不换行	无弹性布局能力
flex	块级元素，独占一行	子元素弹性布局
​​inline-flex​​	行内元素 + 子元素弹性布局	子元素弹性布局

(4)实现效果

展开

收缩 

2、增加面包屑导航 

(1)参考官网

Breadcrumb 面包屑 | Element Plus

(2)循环菜单，获取当前菜单内容

定义一个数组，用于存储菜单信息

获取当前页面菜单值

循环数组，如果循环到的菜单在当前页时，就记录下菜单信息，存入数组，如果时含有子菜单就将父菜单和子菜单一同存入数组

(3)写入面包屑前端样式

将面包屑前端样式写入，并根据当前页的菜单信息循环出菜单名称,图标

(4)解决切换页面时，面包屑内容无法自动更新问题