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;
}
调了调颜色,好看多了。