zz-admin/src/layout/structure/content/navBar.vue

<template>
  <div id="tabberBox">
    <div class="left_hearder">
      <i
        class="el-icon-s-fold"
        :style="navStatusCss ? 'transform: rotate(180deg)' : ''"
        @click="changeNavStatus"
      ></i>
      <div class="searchBox">
        <input type="text" placeholder="搜索" />
        <i class="el-icon-search"></i>
      </div>
    </div>
    <div class="right_hearder">
      <img class="bell" src="@/assets/images/bell@2x.png" alt="" />
      <img class="avatar" src="@/assets/images/Avatar@2x.png" alt="" />
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          {{ userName }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a">乌鸦坐飞机</el-dropdown-item>
          <el-dropdown-item command="exit">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import cookie from "@/utils/cookie";
export default {
  data() {
    return {
      userName: "加载中...",
    };
  },
  watch: {
    "$store.state.userInfo"(newval, olval) {
      console.log(newval);
      this.userName = newval[0].user.nickName;
    },
  },
  computed: {
    // 菜单栏状态
    navStatusCss() {
      return this.$store.state.navStatus;
    },
  },
  mounted() {
    this.userName = this.$store.state.userInfo[0].user.nickName;
  },
  methods: {
    // 收起or展示菜单栏
    changeNavStatus() {
      this.$store.state.navStatus = !this.$store.state.navStatus;
    },
    //用户下拉功能
    handleCommand(command) {
      // if (command === "exit") {
      //   // cookie.delCookie("token");
      //   this.delCookie("token");
      //   this.$router.replace({
      //     path: `/login?TenantId=${sessionStorage.TenantId}`,
      //   });
      //   this.$message("退出成功!");
      // }
      switch (command) {
        case "exit":
          this.delCookie("token");
          this.$router.replace({
          path: `/login?TenantId=${sessionStorage.TenantId}`,
        });
          this.$message("退出成功!");
          break;
        case "a":
          this.$message("乌鸦坐飞机!");
          break;
        default:
          break;
      }
    },
    //删除cookie (名称)
    delCookie(name) {
      var exp = new Date();
      exp.setTime(exp.getTime() - 1);
      var cval = cookie.getCookie(name);
      if (cval != null)
        document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
    },
  },
};
</script>

<style lang="less" scoped>
#tabberBox {
  height: 80px;
  background-color: #2f4379;
  padding-left: 16px;
  padding-right: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  .left_hearder {
    display: flex;
    align-items: center;
    .el-icon-s-fold {
      cursor: pointer;
      font-size: 20px;
      margin-right: 10px;
      transition: all 0.3s;
    }
    .searchBox {
      width: 192px;
      height: 40px;
      border-radius: 20px;
      background: linear-gradient(
        90deg,
        rgba(68, 96, 171, 0.8),
        rgba(126, 142, 183, 0.8)
      );
      display: flex;
      align-items: center;
      overflow: hidden;
      input {
        height: 100%;
        background: transparent;
        border: none;
        outline: none;
        padding: 0px 12px;
        width: 100%;
        box-sizing: border-box;
        color: #ced7f1;
      }
      input::placeholder {
        color: #ced7f1;
      }
      .el-icon-search {
        width: 40px;
        cursor: pointer;
      }
    }
  }
  .right_hearder {
    display: flex;
    align-items: center;
    .bell {
      width: 18px;
      height: 20px;
    }
    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-left: 32px;
      margin-right: 15px;
    }
    .el-dropdown-link {
      cursor: pointer;
      color: #fff;
    }
    .el-icon-arrow-down {
      font-size: 14px;
    }
  }
}
</style>