首页 前端知识 Vue布局秘籍:用这些技巧打造炫酷页面!

Vue布局秘籍:用这些技巧打造炫酷页面!

2024-04-13 09:04:29 前端知识 前端哥 86 597 我要收藏

 原理

 el-container、el-header、el-aside和el-footer是Element UI框架中的布局组件,有着以下关系:

- el-container:容器组件,是整个布局的最外层容器,包含了页面的整体布局。

- el-header:头部组件,位于容器组件的顶部,通常用于放置导航栏、logo等。

- el-aside:侧边栏组件,放置在容器组件的左侧或右侧,用于放置边栏菜单、快捷导航等。

- el-footer:底部组件,位于容器组件的底部,通常用于放置页脚信息、版权声明等。

组件之间的关系是嵌套关系,即el-container包含el-header、el-aside和el-footer。通过这些组件的组合使用,可以实现各种不同的网页布局。

 1. 顶部导航布局:

<template>
  <el-container style="height: 500px;">
    <el-header>顶部导航栏</el-header>
    <el-main>Main 内容</el-main>
  </el-container>
</template>

 

2. 侧边栏布局:

如,可以将el-header放置在el-container的顶部,el-aside放置在左侧,el-footer放置在底部,以创建一个带有头部、侧边栏和底部的整体布局。

<template>
  <el-container style="height: 500px;">
    <el-aside width="200px" style="background-color: #65c0ba;">侧边栏</el-aside>
    <el-main>Main 内容</el-main>
  </el-container>
</template>

注意:侧边栏的下面和右边全都是main,填充了侧边栏就正常展开了。 

 

 

3. 顶部导航 + 侧边栏布局:

<template>
  <el-container style="height: 500px;">
    <el-header style="background-color: #f0f0f0;">顶部导航栏</el-header>
    <el-container>
      <el-aside width="200px" style="background-color: #f8f8f8;">侧边栏</el-aside>
      <el-main>Main 内容</el-main>
    </el-container>
  </el-container>
</template>

 

 

4.顶部导航 + 侧边栏 + 底部布局:

<template>
  <div>
    <el-container style="height: 500px;">
      <el-header class="header">头部</el-header>
      <el-container>
        <el-aside class="sidebar" width="200px">侧边栏</el-aside>
        <el-main>Main 内容</el-main>
      </el-container>
      <el-footer class="footer">底部</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'LayoutExample'
};
</script>

<style>
.header {
  background-color: red;
}

.sidebar {
  background-color: yellow;
}

.footer {
  background-color: blue;
}
</style>

运行成功图:

5. 网格布局:

 这个布局使用了网格布局,包含了两个固定宽度的侧边栏、一个自适应宽度的内容区域和一个固定底部。

<template>
  <el-container style="height: 500px;">
    <el-aside width="150px" style="background-color: #ff7676;">侧边栏</el-aside>
    <el-main style="background-color: #ffd700;">内容</el-main>
    <el-aside width="150px" style="background-color: #65c0ba;">侧边栏</el-aside>
    <el-footer style="background-color: #ffbb54;">底部</el-footer>
  </el-container>
</template>

 

6. 多列布局:

这个布局使用了多个相同宽度的侧边栏和内容区域,使得页面呈现多列的效果。

<template>
  <el-container style="height: 500px;">
    <el-aside width="200px" style="background-color: #65c0ba;">侧边栏</el-aside>
    <el-main>内容区域</el-main>
    <el-aside width="200px" style="background-color: #ffbb54;">侧边栏</el-aside>
    <el-main>内容区域</el-main>
    <el-aside width="200px" style="background-color: #ff7676;">侧边栏</el-aside>
  </el-container>
</template>

 

 

如果你觉得我的文章对你有帮助,能否给我点个赞,关注我呢?你们的支持将是我持续创作的动力,也是我进一步提升的动力。希望我们能够在这个技术的海洋中一起成长,共同探索更多惊喜和可能性。谢谢大家!期待你们的关注和赞同!👍❤️
转载请注明出处或者链接地址:https://www.qianduange.cn//article/4851.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!