2021-4-22

23

其实我也不记得我干了啥，就记录一下调整样式的过程吧。
标签页左边右边我都想改成有滚动条的

    <div v-if="empty == 0" class="box-list">
      <el-tabs
        :tab-position="'left'"
        v-model="editableTabsValue"
        type="border-card"
        @tab-click="handleClick"
        closable
        @tab-remove="removeTab"
      >
        <el-tab-pane
          :key="index"
          v-for="(item, index) in editableTabs"
          :label="item.name"
          :name="`${item.id}`"
        >
          <BoxSingle
            :box="content"
            v-if="item.id == nowPage"
            @refresh="refresh"
          >
          </BoxSingle>
        </el-tab-pane>
      </el-tabs>
    </div>

这里能看到全部标签页内容，绑了一个class是box-list
然后，整个右边的界面（.非目录的.vue文件），都绑了一个box-wrapper
样式是这样的：

.box-wrapper {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  .box-list {
    flex: 1;
    overflow: hidden;
    margin-top: 20px;
    .el-tabs {
      height: 100%;
    }
  }
}

弹性盒布局，回头查一下。
然后剩下的比较重要的是滚动条：

  overflow-y: auto;

这样才能，溢出时才出现滚动条，如果是scroll就是不溢出也出现。
剩下的左边和右边：

.el-tabs--left .el-tabs__nav.is-left,
.el-tabs--left .el-tabs__nav.is-right,
.el-tabs--right .el-tabs__nav.is-left,
.el-tabs--right .el-tabs__nav.is-right {
  height: 100%;
  overflow-y: auto;
  background-color: #232323;
}
.el-tabs--left.el-tabs--border-card .el-tabs__item.is-left.is-active {
  border-color: transparent;
  background-color: #000;
}
.el-tabs--border-card {
  box-shadow: 0 2px 4px 0 rgb(121 119 119 / 50%), 0 0 6px 0 rgb(0 0 0 / 4%);
  /* margin-top: 20px; */
}
.el-tabs--border-card > .el-tabs__content {
  height: 100%;
  padding: 15px;
  overflow-y: auto;
}
.el-tabs--border-card {
  background: black;
}

调了调颜色，好看多了。