Vue-cli实战项目8 主布局的实现

最新推荐文章于 2022-04-27 18:15:50 发布

原创最新推荐文章于 2022-04-27 18:15:50 发布 · 908 阅读

0 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

16 篇文章

订阅专栏

nodejs

15 篇文章

订阅专栏

本文档介绍了如何在Vue-cli项目中实现主布局，包括使用Element的Container布局容器，完成基本布局，设置全屏显示，实现左侧滚动以及滚动条美化。通过App.vue和layout.vue文件的代码展示，详细解释了整个过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

上一章节

Vue-cli实战项目7 提交表单并且进行表单验证

主布局的实现

使用Element 的 Container 布局容器实现
在这里插入图片描述
Container 布局容器API

基本实现

添加布局组件

	 <el-container>
	  <el-header>Header</el-header>
	  <el-container>
		<el-aside width="200px">Aside</el-aside>
		<el-main>Main</el-main>
	  </el-container>
	</el-container>

左侧，实现滚动

在这里插入图片描述

美化滚动条

::-webkit-scrollbar-track
{
  background: rgba(0,0,0,.1);
  border-radius: 0;
}

::-webkit-scrollbar
{
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb
{
    cursor: pointer;
    border-radius: 5px;
    background: rgba(0,0,0,.25);
    transition: color .2s ease;
}

完整代码

App.vue

<template>
  <div id="app">
	 <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'app',
  components: {
  },
  data () {
      return {
		radio: 6
      };
    }
}
</script>

<style>
::-webkit-scrollbar-track
{
  background: rgba(0,0,0,.1);
  border-radius: 0;
}

::-webkit-scrollbar
{
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb
{
    cursor: pointer;
    border-radius: 5px;
    background: rgba(0,0,0,.25);
    transition: color .2s ease;
}
</style>

layout.vue

<template>
	<div>
		<el-container style="position: absolute;left: 0;top: 0;bottom: 0;right: 0;overflow: hidden;">
		  <el-header>Header</el-header>
		  <el-container style="height: 100%;padding-bottom: 60px;">
			<!-- 侧边布局 -->
			<el-aside width="200px">
				<li v-for="i in 100" :key="i">{{i}}</li>
			</el-aside>
			<!-- 主布局 -->
			<el-main>
				<li v-for="i in 100" :key="i">{{i}}</li>
			</el-main>
		  </el-container>
		</el-container>
	</div>
</template>

<script>
</script>

<style>
	 .el-header{
	   background-color: #B3C0D1;
	   color: #333;
	 }
	 
	 .el-aside {
	   background-color: #D3DCE6;
	   color: #333;
	 }
	 
	 .el-main {
	   background-color: #E9EEF3;
	   color: #333;
	 }
</style>