【Vue入门】利用VueCli搭建基本框架--在Home页实现上左右基本布局（五）

<template>
  <el-menu
    default-active="1-4-1"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    :collapse="isCollapse"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <el-menu-item
      v-for="(item, key) of menuList"
      :key="key"
      :index="item.name"
    >
      <i
        :model="isCollapse"
        @click="showAndHideSiderBar"
        :class=item.class
      ></i>
      <span slot="title">{{ item.navItem }}</span>
    </el-menu-item>
    <!-- <el-menu-item>
        <i :model="isCollapse" @click="showAndHideSiderBar" :  :style="sideBarStyleObj"></i>
        <span slot="title" @click="showAndHideSiderBar">{{tipsWords}}</span>
        </el-menu-item>
        <el-menu-item index="1-1">
            <i class="el-icon-message"></i>
            <span slot="title">学生管理</span>
        </el-menu-item>

        <el-menu-item  index="1-2">
            <i class="el-icon-menu"></i>
            <span slot="title">成绩管理</span>
        </el-menu-item>

        <el-menu-item  index="1-3">
            <i class="el-icon-setting"></i>
            <span slot="title">专业管理</span>
        </el-menu-item> -->
  </el-menu>
</template>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  /*  200px; */
}

</style>

<script>
export default {
  data() {
    return {
      isCollapse: false,
      menuList: [
        { name: "/", navItem: "收缩/展开", class:"el-icon-d-arrow-right"},
        { name: "/Students", navItem: "学生列表", class:"el-icon-menu"},
        { name: "/Major", navItem: "专业管理", class:"el-icon-date" }
      ],
      activeIndex:'/Students',
    };
  },
  methods: {
    //侧边栏打开时关联事件
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    //侧边栏收缩时关联事件
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    //收缩或展开侧边栏
    showAndHideSiderBar(){
        this.isCollapse = !this.isCollapse
        console.log(this.isCollapse);
    },
  }
};
</script>

<template>
  <el-container>
    <el-header>
      <headerMenu />
    </el-header>
    <el-container>
      <el-aside :width="isCollapse ? '64px':'200px'">
        <myMenu />
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

 

<script>
import myMenu from "@/components/navMenu";
import headerMenu from "@/components/headerMenu";
export default {
  data() {
    return {
      isCollapse: false,
    };
  },
  components: {
    myMenu,
    headerMenu,
  },
};
</script>

<style>
.el-container {
  height: 100%;
}
.el-aside {
  background-color: #545c64;
}
.el-main {
  background-color: #eaedf2;
}
.el-header{
  width: 100%;
  background-color: #545c64;
}
</style>

<template>
    <div class="header">欢迎：{{userName}}
        <el-dropdown>
        <span class="el-dropdown-link">
            更多<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click="handlePerson">个人设置</el-dropdown-item>
            <el-dropdown-item @click="handleLoginOut">退出</el-dropdown-item>
        </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
export default {
    data(){
        return{
            userName:'admin'
        }
    },
    methods:{
        //进入个人设置页面
        handlePerson(){
            console.log('用户点击了个人设置')
        },
        //用户退出
        handleLoginOut(){
            console.log('用户点击了退出设置')
        }
    }

}
</script>

<style>
    .header{
        text-align: right;
        background-color: #545c64;
        color:white;
        width: 100%;
    }
    .el-dropdown-link{
        color:yellow
    }
</style>