vite+vue+ts+element-plus从零开发管理后台框架(07)-主页内容布局

测试

编辑src/views/Home.vue,使内容超过布局。

<template>
    <p v-for="item in 50">首页{{ item }}</p>
</template>

浏览器查看,当内容超过布局时有两个问题。一是滚动时会带动顶部和侧边栏滚动,二是滚动条太丑了。

内容超过布局

固定顶部和侧边栏

编辑src/views/Main.vue,添加el-main样式,这里的60px是顶部的高度。

.el-main {
    height: calc(100vh - 60px);
    padding: 12px;
    text-align: left;
}

固定顶部和侧边栏

优化滚动条

编辑src/views/Main.vueel-main修改如下。

<el-main>
    <el-scrollbar>
        <router-view />
    </el-scrollbar>
</el-main>

滚动条

本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!