msyj-admin-local/src/components/ViewHeader.vue

<template>
  <div :class="classes">
    <div class="head-main">
      <!-- <div class="head-logo">
        <slot name="logo">
          <h1>美术阅卷系统</h1>
        </slot>
      </div> -->
      <div class="head-user">
        <Dropdown placement="bottom-end" transfer @on-click="menuClick">
          <span class="user-name"><Icon type="md-person" size="16" /> </span>
          <DropdownMenu slot="list">
            <DropdownItem>{{ username }}</DropdownItem>
            <DropdownItem
              v-if="showResetPwd"
              class="color-default-hover"
              divided
              name="toResetPwd"
              >修改密码</DropdownItem
            >
            <DropdownItem
              class="color-error-hover"
              divided
              name="logout"
              @click="logout"
            >
              退出登录
            </DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
      <div class="head-nav" v-if="$slots.navSub">
        <slot name="navSub"></slot>
      </div>
    </div>

    <reset-pwd ref="ResetPwd" v-if="showResetPwd"></reset-pwd>
  </div>
</template>

<script>
import ResetPwd from "../modules/login/ResetPwd";
import { logout } from "@/api";

export default {
  name: "view-header",
  components: { ResetPwd },
  props: {
    showResetPwd: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    classes() {
      return ["view-header"];
    }
  },
  data() {
    return {
      username: this.$ls.get("user", { loginName: "" }).loginName
    };
  },
  methods: {
    menuClick(name) {
      if (!name) return;
      this[name]();
    },
    toResetPwd() {
      this.$refs.ResetPwd.open();
    },
    async logout() {
      await logout();
      this.$ls.clear();
      this.$router.push({ name: "Login" });
    }
  }
};
</script>