vue3后台管理框架geeker admin -- ThemeDrawer 样式分析0 环境 Node.js 16.x+

0 环境

• Node.js 16.x+
• pnpm 7.x+
• Git

1 参考文档

geeker admin官方文档

element-plus官方文档

vue router官方文档

ToolBarRight.vue

useUserStore

mitt

ThemeDrawer/index.vue

ThemeDrawer/index.scss

2 前言

主要是介绍ThemeDrawer/index.scss，位置在src/layouts/components/ThemeDrawer/index.scss。下面我说的默认就是该index.scss。然后还有index.vue也在同级下，所有默认就是这两个文件。

3 正文

先看index.scss第1-9行，在打开index.vue，找到与class="divider"相关，第4-7行、73-76行、95-98行。

这里是抽取成一个类，设置上边距为15px，.el-icon目的的是调整图标的位置和大小。为啥要调整呢，因为图标位置和文字之间不对称，如下图：

再看index.scss第10-27行，再到index.vue中，找到class="theme-item"，因为这个类相关的div太多了，所有我就截图了两个，如下图：只要图右边红色选中框，它下面有开关按钮的，都跟.theme-item相关，

这里做了什么呢，就是将span里的文字和图标(这里的图标不一定每个都有)与开关按钮，交叉轴上居中对齐，span和开关按钮，将它们置于首尾，但不能太靠边，左右内填充5px，上下边距14px，这样就美观很多了。

还有个问题就是span里的文字和图标偏大，图标和文字有点不对称，当你font-size: 14px;，当你将span里的文字和图标调小了，这种不对称还存在的，这里就需要交叉轴上居中对齐。还有图标黑色很难看，以及放上去没有手型的样式等细节，.el-icon的处理，设置左边距，调整图标大小，设置颜色，以及光标放上去为手型。还有mb50等同于margin-bottom: 50px !important;

剩下的inde.scss，从28行一直到最后，都是关于.layout-box，也就是index.vue第8行-52行。所针对的样式就是如下图：

这里相反不是以.layout-box为重点，而是以它的子项.layout-vertical，.layout-classic，.layout-transverse，.layout-columns为中心，因为需要宽高。而.layout-item则是前面这4个class都需要用到的。

首先根据观察，这些样式都是对.layout-dark、.layout-container、.layout-light做宽度或者高度的调整。具体对应块，并且我注释了flex-wrap: wrap;，如下图：

现在看.layout-box，首先有一个相对定位，貌似也没用到，然后是4个布局样式flex布局，并且可以换行显示，元素两边放，padding做了上左右填充的工作。.layout-item，设置盒模型，宽高和内填充、阴影、外边框圆角，加了一个过渡动画，.layout-dark主要是背景色 + 外边框圆角，.layout-light和它类似，无非背景色不同，.layout-content不仅需要背景色和外边框圆角，还需要虚线边框。

.el-icon它是对那个√做样式处理，绝对定位(子绝父相)，固定在右下角的位置，设置颜色和动画。如下图所示。&:hover就是鼠标放上去的时候，有个阴影效果。

.is-active是被选中项，有个阴影边框的效果，如下图，最外面那个边框。

结合下面的代码 + 图片，下面我说的1、2、3是下图所指的位置，.layout-vertical，space-between是将1和2放两边，设置个下边距，.layout-dark设置百分比宽度，.layout-container需要上下布局，并且设置一个宽度，上下布局就需要考虑.layout-light和.layout-content它两个高度占比。注意了这里的3就是那个对勾图标，这里是通过v-if判断是否展示，而is-active也是通过layout == 'vertical'判断的。.layout-classic它们都类似。

<el-tooltip effect="dark" content="纵向" placement="top" :show-after="200">
    <div :class="['layout-item layout-vertical', { 'is-active': layout == 'vertical' }]" @click="setLayout('vertical')">
      <div class="layout-dark"></div>
      <div class="layout-container">
        <div class="layout-light"></div>
        <div class="layout-content"></div>
      </div>
      <el-icon v-if="layout == 'vertical'">
        <CircleCheckFilled />
      </el-icon>
    </div>
</el-tooltip>

// scss

.layout-vertical {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .layout-dark {
      width: 20%;
    }
    .layout-container {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 72%;
      .layout-light {
        height: 20%;
      }
      .layout-content {
        height: 67%;
      }
    }
}

4 小结

scss就是分三大块，el-divider(图标 + 小标题)、文字(图标)和开关按钮、4种布局样式。最主要是4种布局样式细节比较多，.layout-item设置的是皮，.layout-vertical设置的是骨，是is-active判断，是给外边框套个颜色，看着清晰。选中时，还有个对勾的图标，这里通过v-if判断是否显示。