[Vue]2. element-ui容器運用 + 導航欄佈局 + 自適應高度

 

0.效果：點擊不同圖標跳到不同子頁面，自適應高度不管怎麼拉伸都鋪滿屏幕

1.項目結構圖如下：紅圈本項目會用到

新建index.js: 使得頁面瀏覽器上能訪問&&子頁面設置&&頁面跳轉

新建Info.vue:主頁

新建List.vue:子頁面：點列表會出現的頁面 

新建User.vue 子頁面：點個人中心會出現的頁面

新建Login.vue

然後npm run dev 先把項目跑起來，把element-ui引入到項目（過程略）

 

2.實現：

2.1首先我們先完成如下圖的佈局+配置路由

（可以看到未鋪滿）

在index.js里加上如下代碼：（配置路由）

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'
import Home from '@/views/Home'

Vue.use(Router)

export default new Router({
  linkActiveClass:'active',
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/Info',
      name: 'Info',
      component: () => import('@/views/Info'),//懶加載
      children: [
        {
          path: 'List',
          name: 'List',
          component: () => import('@/views/List')//綁定子組件，懶加載
        },
        {
          path: 'User',
          name: 'User',
          component: () => import('@/views/User')//綁定子組件，懶加載
        },
    
      ]
    },
  ]
})

Info.vue加上如下element-ui的容器模板代碼：

https://element.eleme.cn/#/zh-CN/component/container

<template>
    <div>
        <el-container>

            <el-header>Header</el-header>

            <el-container>
                <el-aside width="200px">Aside</el-aside>
                <el-container>
                    <el-main>Main</el-main>
                    
                </el-container>
            </el-container>
            <el-footer>Footer</el-footer>
        </el-container>

    </div>
</template>


<script>
export default {
    
}
</script>


<style scoped>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
</style>

此時本地可打開http://localhost:8080/#/Info查看效果

 

2.2 給容器加上自適應高度

在Info.vue下面加上這倆玩意& 上面的div標籤加上class="app-wrapper"

  body,#app,.el-container{
        /*設置內部填充爲0，幾個佈局元素之間沒有間距*/
        padding: 0px;
         /*外部間距也是如此設置*/
        margin: 0px;
        /*統一設置高度爲100%*/
        height: 100%;
    }
  .app-wrapper {
    overflow: hidden;
    height: 100%;
    width: 100%;
  }

效果如下圖：已鋪滿！

 

2.3 把導航欄加上，也是用的element-ui裏面的組件

在Info.vue 的el-aside標籤里加上導航欄，然後css也跟着改

 <el-menu
      :default-active="this.$route.path"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router=true
      >
      <h3 style="color:white;text-align:center;">自定義顏色</h3>
          <el-menu-item index="/Info/List">
              <i class="el-icon-menu"></i>
              <span slot="title">列表</span>
              </el-menu-item>

              <el-menu-item index="/Info/User"> <!-- 配置子頁面 -->
                  <i class="el-icon-menu"></i>
                   <span slot="title">個人中心</span>
                   </el-menu-item>
 </el-menu>

 .el-menu{
        height: 100%;
 }

 .el-aside {
        background-color: #D3DCE6;
        color: #333;
        //text-align: center;
        width: 160px!important;
 }

2.4 子頁面分別加點文字，然後 搞個半透明背景圖

 

首先在Info.vue的<el-main>里加上路由出口，使得按按鈕能成功顯示不同的子頁面

<div class="mid1"> <router-view class="mid"></router-view></div>    
                <!-- <router-view/> 路由出口，顯示子頁面 -->

    .mid{
        height: 100%;
        background:rgba(0, 0, 0, 0.5);
        background-size:cover;
    }
    .mid1{
        height: 100%;
        background-image:url('../../static/1.jpg');
        background-size:cover;
        width:100%;
    }

加上css，加上背景圖半透明，完成！（圖片自己隨便加）

 

項目總代碼：Info.vue

<template>
    <div class="app-wrapper">
    <el-container direction="vertical">
        <el-header>Header</el-header>
        <el-container >
            <el-aside width="200px" >
                <el-menu
                    :default-active="this.$route.path"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    router=true
                    >
                    <h3 style="color:white;text-align:center;">自定義顏色</h3>
                        <el-menu-item index="/Info/List">
                        <!-- 配置子頁面 -->
                            <i class="el-icon-menu"></i>
                            <span slot="title">列表</span>
                        </el-menu-item>

                        <el-menu-item index="/Info/User"> <!-- 配置子頁面 -->
                            <i class="el-icon-menu"></i>
                            <span slot="title">個人中心</span>
                        </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <div class="mid1"> <router-view class="mid"></router-view></div>    
                <!-- <router-view/> 路由出口，顯示子頁面 -->
            </el-main>
        </el-container>  
        <el-footer>sdasd</el-footer>
    </el-container>

    </div>
</template>


<script>
export default {
    name:'Info',
}
</script>


<style scoped lang="scss">
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }
     .el-menu{
        height: 100%;
    }
    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        //text-align: center;
        width: 160px!important;
    }
    .mid{
        height: 100%;
        background:rgba(0, 0, 0, 0.5);
        background-size:cover;
    }
    .mid1{
        height: 100%;
        background-image:url('../../static/1.jpg');
        background-size:cover;
        width:100%;
    }
    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        padding: 0;
    }

    .app-wrapper {
        //position: relative;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }
     body,#app,.el-container{
        /*設置內部填充爲0，幾個佈局元素之間沒有間距*/
        padding: 0px;
         /*外部間距也是如此設置*/
        margin: 0px;
        /*統一設置高度爲100%*/
        height: 100%;
    }
    
</style>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'


Vue.use(Router)

export default new Router({
  linkActiveClass:'active',
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
   
 
    {
      path: '/Info',
      name: 'Info',
      component: () => import('@/views/Info'),//綁定子組件，懶加載
      children: [
        {
          path: 'List',
          name: 'List',
          component: () => import('@/views/List')//綁定子組件，懶加載
        },
        {
          path: 'User',
          name: 'User',
          component: () => import('@/views/User')//綁定子組件，懶加載
        },
        {
          path: 'Add',
          name: 'Add',
          component: () => import('@/views/Add')//綁定子組件，懶加載
        },
      ]
    },
    {
      path: '/fuck',
      name: 'fuck',
      component: () => import('@/views/fuck')//綁定子組件，懶加載
    },

  ]
})

List.vue 跟User.vue裏面隨意發揮，略