vue3 后台管理框架geeker admin -- 纵向header ToolBarLeft组件样式下
0 环境
1 参考文档
2 正文
看下图，这里对应的是Breadcrumb.vue第二行，这里是一个数组里，渲染三个class，breadcrumb-box、mask-image、no-icon，这里的no-icon需要全局里的面包屑导航图标为false的时候，才会生效。不清楚vue3绑定数组的，看第二张图(具体的看vue3官方文档Class与Style 绑定)。
breadcrumb-box
先看breadcrumb-box，做的很简单，flex+垂直居中，超出隐藏。下图：
再看56行，禁止文本自动换行, 再往下看相对定位，会在no-icon中用到。设为行内块状元素，取消元素的浮动。62行垂直方向上向上移动3像素。
这里是向上移动3像素的元素。el-breadcrumb__inner它将元素设置为内联级别的 flex 容器，不然循环出来多个div，会独占一行的，需要，然后&.is-link这块区域的前景色设置和hover时的颜色设置。breadcrumb-icon设置图标的大小、上、右的外边距。breadcrumb-title设置上边距。可以理解为微调。
81-84行是设置最后一个div颜色和hover时的颜色，看下图。
看下图：将分隔符向上移动 1px。
mask-image
在看mask-image，它不在该文件下面，而是在/src/styles/element.scss(想在线的看上面的文档，element.scss)。找到mask-image，就两行代码，设置了右侧内边距50px，这个遮罩是一个线性渐变，从左向右（90度）开始，从开始位置到元素宽度减去50像素处是全黑（#000000），然后在后面的 50 像素内会从黑色渐变到完全透明。如下图：
上面不是-50px么，那片变成了透明么，正好padding-right: 50px;补齐。
no-icon
no-icon和面包屑图标有关，要验证的话，先找到header右边那个衣服图标，点进去，将面包屑图标置灰。如下图：
然后注销no-icon，结果如下图：
是不是不对齐，样式看着有问题，no-icon就是为了解决它的。
从91行开始看，重写了面包屑里的样式，.el-breadcrumb__item 的元素向上移动2像素，没看到定位是吧，其实第58行已经加上了position: relative;。
item-no-icon，在垂直方向上没有移动。
3 总结
更多的是细节上的处理，比如微调，边距、颜色。
转载自:https://juejin.cn/post/7394278385563172904