vue使用element-ui或者element-plus固定 el-header 和 el-aside
在使用element-plus做后臺(tái)管理的時(shí)候，需要固定el-header和el-aside，特此記錄以下。
只需要將el-main固定高度即可。
main.vue
<div class="common-layout">
<el-container>
<el-aside width="12rem">
<nav-menu />
</el-aside>
<el-container>
<el-header height="4rem">
<nav-header />
</el-header>
<el-main>
<router-view />
</el-main>
</el-container>
</el-container>
</div>
css
.el-main {
background-color: #f5f7f9;
height: calc(100vh - 4rem);
}
將el-main高度后，當(dāng)el-main內(nèi)容超出固定高度后就能顯示滾輪了。將滾輪樣式修改一下就好了。
效果：
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-547505.html
滾輪樣式：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-547505.html
/**修改全局的滾動(dòng)條*/
/**滾動(dòng)條的寬度*/
::-webkit-scrollbar {
/*滾動(dòng)條整體樣式*/
width: 10px;
/*高寬分別對(duì)應(yīng)橫豎滾動(dòng)條的尺寸*/
height: 1px;
}
/* 滾動(dòng)槽 */
::-webkit-scrollbar-track {
border-radius: 10px;
}
/* 滾動(dòng)條滑塊 */
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: rgba(109, 109, 109, 0.4);
height: 120px;
}
到了這里，關(guān)于vue使用element-ui或者element-plus固定 el-header 和 el-aside的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
