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

<template>
  <div class="view-header">
    <div class="head-logo">
      <slot name="logo">
        <!-- big logo 160*40 -->
        <h1>LOGO</h1>
      </slot>
    </div>
    <div class="head-user">
      <span class="user-name"
        ><Icon type="md-person" size="16" /> {{ username }}</span
      >
      <span class="user-logout" @click="logout">
        <Icon type="md-power" size="20" />
      </span>
    </div>
    <div class="head-info">
      <slot name="info"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "view-header",
  data() {
    return {};
  },
  computed: {
    username() {
      return this.$store.state.user.name;
    }
  },
  methods: {
    logout() {
      this.$ls.clear();
      this.$router.push({ name: "Login" });
    }
  }
};
</script>