5-7 页面布局整体样式优化

目录：

• 侧边栏背景色改变
• tag选择样式优化
• 面包屑当前激活菜单样式优化
• 侧边菜单栏折叠

一、侧边栏的背景色改变

因为我们Header.vue的背景色是黑色的，所以我们的侧边栏就用默认的。修改 Aside.vue。

<template>
  <!--background-color自定义颜色,#545c64是自带颜色-->
  <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :collapse="isCollage">
    ....
  </el-menu>
</template>

<script>
    //....
</script>

<style scoped>
  /*....*/
</style>

效果图如下：

二、tag选择样式优化

实现的需求：当我们点击 tags标签的时候，则显示不一样的主体 ，这边根据官网，通过effect属性来控制的。

 

所以我们要修改 Tab.vue:

<template>
  <div class="tabs">
      <!--:effect="$route.name === tag.name ? 'dark' : 'plain'" 根据effect来判断-->
      <el-tag :key="tag.name" size="small" v-for="tag in tags" :closable="tag.name !== 'home'" :disable-transitions="false"
              @close="handleClose(tag)" :effect="$route.name === tag.name ? 'dark' : 'plain'"  @click=changeMenu(tag)>
        {{tag.label}}
      </el-tag>
  </div>
</template>

<script>
  //.....
</script>

<style scoped>
  ....
  .tabs .el-tag { 
    margin-right: 15px;
    cursor: pointer; /*点击样式改成 point*/
  }
</style>

实现的效果如图：

三、面包屑当前激活菜单样式优化 

我们要把面包屑当前激活的菜单样式  改成 color: #666666;并且 放弃 加粗：font-weight: normal; => 修改 Header.vue

<style> /*组件嵌套组件的样式不能写scoped，所以这边重新写一个style*/
  .....

  .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{  /*面包屑当前激活菜单样式优化*/
    color: #666666;
    font-weight: normal;
  }
</style>

效果如图：

四、侧边菜单栏折叠

侧边菜单栏折叠，我们需要借助 Vuex的方法来做。

4.1、定义侧边栏是否折叠状态 => Tab.js

const state = {
  .....,
  isCollapse:false,   //定义默认是 false
  .....
};

const mutations = {
  ....,
  collapseMenu(state){
    state.isCollapse = !state.isCollapse    //折叠侧边菜单栏
  }

};

4.2、 在Header.vue的按钮中调用侧边菜单栏方法 => Header.vue

<template>
    <header>
      <div class="l-content">
        <!--设置button的背景色为plain,定义@click="collapsMenu"-->
        <el-button plain icon="el-icon-menu" size="mini" @click="collapsMenu"></el-button>
        ........
      </div>
    </header>
</template>

<script>
    export default {
      .....},
      methods:{
        collapsMenu(){   //调用 vuex中的tab.js中collapseMenu的方法
          this.$store.commit('collapseMenu');
        }
      }
    }
</script>

<style scoped>
  ......
</style>

<style> /*组件嵌套组件的样式不能写scoped，所以这边重新写一个style*/
  .....
</style>

4.3、设置获取左边菜单栏属性 => Aside.vue

说明：主要是通过:collapse="false" 绑定 是否伸缩，这个官网属性是有的。:collapse绑定的值是通过在Tab.js中的isCollapse

<template>
  <!--:collapse="isCollage"属性来控制是否收缩-->
  <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :collapse="isCollage">
    .....
  </el-menu>
</template>

<script>
    export default {
        computed: {
          ......,
          isCollage(){
            return this.$store.state.tab.isCollapse;
          }
        },
        .....
    }
</script>

<style scoped>
  .....
  .el-menu-vertical-demo:not(.el-menu--collapse) {  /*在官网的NaMenu -> 折叠 的样式的参考*/
    width: 200px;
    min-height: 400px;
  }
</style>

 这边还需要有一个要注意的就是，当我们伸缩的时候，会看到侧边栏的背景色夹杂着白色，因为我们 在Main.vue对侧边栏是固定的，width='200px'，我们只需要把 width='auto'即可 => Main.vue

<template>
    <el-container style="height: 100%">
      <!--宽度设置为auto，就会根据大小自动设置宽度-->
      <el-aside width="auto"><Aside></Aside></el-aside>
      ....
    </el-container>
</template>

 效果如图：