smsb-web-develop/src/layout/components/Navbar/index.vue

<template>
  <div class="l-flex--row c-navbar">
    <breadcrumb class="l-flex__auto c-navbar__item" />
    <i
      v-if="__PLACEHOLDER__"
      class="l-flex__none c-navbar__item c-navbar__info u-pointer"
    >
      <i class="c-navbar__count">1</i>
    </i>
    <upload-dashboard
      v-if="hasEditPermission"
      class="l-flex__none c-navbar__item"
    />
    <el-dropdown
      class="l-flex__none c-navbar__item c-navbar__user u-pointer"
      trigger="click"
      @command="handleCommand"
    >
      <div class="l-flex--row">
        <img
          v-if="avatar"
          class="c-navbar__avatar"
          :src="avatar"
        >
        <span class="c-navbar__name">{{ name }}</span>
        <i class="el-icon-arrow-down" />
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="profile">个人设置</el-dropdown-item>
        <el-dropdown-item
          command="logout"
          divided
        >
          退出登录
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Breadcrumb from './Breadcrumb'
import UploadDashboard from './UploadDashboard'

export default {
  name: 'Navbar',
  components: {
    Breadcrumb,
    UploadDashboard
  },
  computed: {
    ...mapGetters([
      'avatar',
      'name'
    ])
  },
  methods: {
    handleCommand (command) {
      switch (command) {
        case 'profile':
          this.$router.push({ name: 'profile' })
          break
        case 'logout':
          this.$store.dispatch('user/logout')
          break
        default:
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.c-navbar {
  height: 50px;
  padding: 0 24px;
  position: relative;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  overflow: hidden;

  &__item + &__item {
    margin-left: 32px;
  }

  &__info {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url("~@/assets/icon_inform.png") 0 0 / 100% 100% no-repeat;
  }

  &__count {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    padding: 0 2px;
    color: #fff;
    font-size: 12px;
    font-style: normal;
    line-height: 16px;
    text-align: center;
    border-radius: 10px;
    background-color: $error--dark;
    transform: translate(50%, -50%);
  }

  &__user {
    display: inline-block;
    font-size: 14px;
    color: $blue;

    &.hover-effect {
      cursor: pointer;
      transition: background 0.3s;

      &:hover {
        background: rgba(0, 0, 0, 0.025);
      }
    }
  }

  &__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  &__name {
    padding-right: 10px;
  }

  .el-icon-arrow-down {
    font-weight: bolder;
  }
}
</style>