Vue + Node + Element UI 项目(六)_侧边栏魔改

1. 页面样式

2. 页面代码-用Home文件做测试

• HTML

<template>
  <el-container :style="{ height: clientHeight + 'px' }">
    <el-aside 
    :style="{ width: [isCollapse ? asideWidth[1] : asideWidth[0]] + 'px' }"  
    :class="[isCollapse ? 'is-collapse' : '']">

      <div class="sys-info">
        <!-- <span >{{sysName}}</span> -->
        <img :src="[ isCollapse ?  logoUrls[1] : logoUrls[0] ]" :alt="sysName">
      </div>

     <!-- 导航栏开始 -->
      <el-menu
        default-active="1-1"
        class="el-menu-vertical-demo"
        @open="isOpen"
        @close="isClose"
        :collapse="isCollapse">
       
        <el-submenu index="1">
          <template slot="title">
            <div class="nav-first">
              <i class="el-icon-location"></i>
              <span slot="title">导航一</span>
            </div>
          </template>
          <el-menu-item index="1-1">
            <span slot="title"><span class="dot"></span>选项一</span>
          </el-menu-item>
          <el-menu-item index="1-2">
            <span slot="title"><span class="dot"></span>选项2</span>
          </el-menu-item>
          <el-menu-item index="1-3">
            <span slot="title"><span class="dot"></span>选项一</span>
          </el-menu-item>
          <el-submenu index="1-4">
            <span slot="title"><span class="dot"></span>选项4</span>
            <el-menu-item index="1-4-1">选项1</el-menu-item>
          </el-submenu>
        </el-submenu>
        
        <el-menu-item index="2">
          <div class="nav-first">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </div>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <div class="nav-first">
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
          </div>
        </el-menu-item>
        <el-menu-item index="4">
          <div class="nav-first">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
          </div>
        </el-menu-item>
      </el-menu>


    </el-aside>
    <el-container>
      <el-header>
        <a class="asibe-btn"  @click="collapseChage" >
          <i :class="[ isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold' ]" ></i>
        </a>
        <a class="user-info">
          <el-avatar :size="32" :src="userAvatUrl"></el-avatar>
            <span>张三丰</span>
        </a>
      </el-header>
      <el-main>Main
        <div style="background: #f00; height: 1200px"></div>


      </el-main>
    </el-container>
  </el-container>
</template>

.JS

<script>
// import mock from '@/mock/index.js';
// import Cookies from "js-cookie";
import router from '@/router';

export default {
  name: 'Home',
  data () {
    return {
      asideWidth: [264, 64], //侧边栏展开和收起宽度
      sysName: '设计之家',
      clientHeight:'', //el-container 的高度
      userAvatUrl: "/static/user_avatar_default.png", //用户头像地址
      isCollapse: false,
      logoUrls: ["/static/logo_default.svg", "/static/logo_white.svg"]
    }
  },
  mounted(){
      this.initHeight(); // 计算el-container 的高度
  },

  methods: {
    initHeight(){  //获取高度
        //获取浏览器可视区域高度
        this.clientHeight =  window.innerHeight;
        // console.log(this.clientHeight);

        window.onresize = () => {  //当窗口或框架发生改变时触发
          this.clientHeight =  window.innerHeight;
          // console.log(this.clientHeight);
        };
    },
    //侧边栏菜单展开和收起
    isOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    isClose(key, keyPath) {
      console.log(key, keyPath);
    },

     // 侧边栏折叠
    collapseChage() {
      this.isCollapse = !this.isCollapse;
    }
  }

}
</script>

• SCSS

<style src="./home.scss"  lang="scss">
</style>