海南州公司网站建设一键logo设计官网
一、效果
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)写入面包屑前端样式
将面包屑前端样式写入，并根据当前页的菜单信息循环出菜单名称,图标
