kmt/src/components/MenuComponent.vue

<template>
  <el-col :span="24" class>
    <el-col :span="2" :offset="2">
      <img class="logoImg" src="../assets/img/log.png">
    </el-col>

    <!-- v-show="roles.indexOf(item.id) >= 0" -->
    <el-col
      :span="2"
      v-for="(item, index) of menuData"
      :key="item.index"
      @click.native="secondNavClick(item,index)"
      style="text-align: center"
    >
      <span class="lineStyle" :class="{active:index == checkindex,menu_item:true}">{{item.name}}</span>
    </el-col>

    <el-col :span="4" :offset="12">
      <div class="login">   
        <img  class="userstyle"  :src="BASE_URL + avatar" alt="">
        <!-- <img class="userstyle" src="../assets/img/user.jpg"> -->
        <span>{{name}}</span>
        <i class="el-icon-caret-bottom"></i>
      </div>
      <div class="out">
        <img src="../assets/img/out.png" alt class="out-img">
        <span @click="Loginout">退出</span>
      </div>
    </el-col>
    <el-col :span="1"></el-col>
  </el-col>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "navMenu",
  // props: {
  //   navsData: Array
  // },
  data() {
    return {
       BASE_URL: "https://xt.sharingschool.com/upload/",
      menuData: [
        {
          id: "2",
          name: "校区群管理员",
          href: "SchoolManager"
        },
        {
          id: "2",
          name: " 在线批改老师",
          href: "TeacherApporval"
        }
        // {
        //   id: "3",
        //   name: "",
        //   href: "TeacherPay"
        // },
        // {
        //   id: "1",
        //   name: "校区管理员",
        //   href: "SuperAdmin"
        // },
        // {
        //   id: "1",
        //   name: " 批改老师注册审核",
        //   href: "CheckTeacherAudit"
        // },
        // {
        //   id: "3",
        //   name: "批改老师薪酬表",
        //   href: "CheckTeacherPay"
        // }
      ],
      checkindex: 0
    };
  },
  watch: {
    navsData(n) {
      this.navsData = n;
      this.initNav();
    }
  },
  methods: {
    // 初始化处理
    // initNav() {
    //   this.menuData = JSON.parse(JSON.stringify(this.navsData));
    // },
    secondNavClick(val, index) {
      this.$router.push("/home/" + val.href);
      this.checkindex = index;
    },
    //  账号管理、退出登录
    Loginout() {
      this.$confirm("您确定退出吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          localStorage.removeItem("accessToken");
          this.$store.dispatch("LogOut").then(() => {
            location.reload(); // 为了重新实例化vue-router对象 避免bug
          });
        })
        .catch(() => {
          // console.log(err)
          this.$message("已取消操作!");
        });
    }
  },
  computed: {
    ...mapGetters(["name", "avatar", "roles"])
  },
  mounted() {
    // this.initNav();
  }
};
</script>
<style scoped>
/*.mainHeader{*/
/*height: 110px;*/
/*line-height:110px;*/
/*}*/
.menu_item {
  cursor: pointer;
  color: #999999;
  font-size: 9px;
  font-family: serif;
  box-sizing: border-box;
  height: 80%;
  text-align: center;
  padding-bottom: 19px;
  /*display: inline-block;*/
}
.menu_item:hover {
  color: #52cc60;
  border-bottom: 2px solid #52cc60;
}
.active {
  color: #52cc60 !important;
  border-bottom: 2px solid #52cc60;
}
.menu_item + .menu_item {
  border-left: 1px solid #ffffff;
}
.logoImg {
  width: 136px;
  height: 52px;
}
.sishuLogo {
  margin-left: 125px;
}
.userstyle {
   width:50px;
  height:50px;
  border-radius: 25px;
}
.lineStyle {
  color: #999999;
  font-size: 18px;
}
.login {
  color: #333333;
  font-size: 14px;
  display: inline-block;
}
.out {
  margin-left: 40px;
  font-size: 14px;
  color: #666666;
  display: inline-block;
  cursor: pointer;
}
.out-img {
  width: 16px;
  height: 18px;
  display: inline-block;
}
</style>