GCLS_Page_Learn/src/layouts/components/LayoutHeader.vue

<template>
  <div class="header">
    <div class="header-container">
      <div class="header-container-left">
        <span class="logo">LOGO</span>
        <span class="home">主页</span>
        <span class="menu">
          <el-dropdown placement="top">
            <span class="el-dropdown-link">
              <span class="el-dropdown-current-name">{{ curDropdown }}</span>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in dropdownList" :key="item.id">
                <svg-icon icon-class="teaching-manager" /><span>{{ item.name }}</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>
      </div>
      <div class="header-container-right">
        <!-- <el-dropdown @command="setI18nLang">
            <span class="el-dropdown-link">
              切换语言<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="list in languageList"
                :key="list.language_type"
                :command="list.language_type"
              >
                {{ list.language_name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
        <!-- <el-input prefix-icon="el-icon-search" placeholder="输入关键字搜索" /> -->
        <el-avatar icon="el-icon-user" />
        <el-dropdown class="header-container-right-name" placement="bottom">
          <span>NAME</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="signOut">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-badge :is-dot="isDot" class="header-container-right-bell">
          <i class="el-icon-bell"></i>
        </el-badge>
      </div>
    </div>
  </div>
</template>

<script>
import { GetLanguageList } from '@/api/app';
import { setI18nLang } from '@/utils/i18n';

export default {
  name: 'LayoutHeader',
  props: {
    userType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      curDropdown: '教学管理系统',
      dropdownList: [
        {
          id: 1,
          name: '教学管理系统',
          icon: 'el-icon-search'
        }
      ],
      isDot: false,
      languageList: []
    };
  },
  computed: {
    realName() {
      let user = this.$store.state.user;
      return user.user_real_name ? user.user_real_name : user.user_name;
    }
  },
  mounted() {
    GetLanguageList().then(data => {
      this.languageList = data.language_list;
    });
  },
  methods: {
    async signOut() {
      await this.$store.dispatch('user/signOut');
      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
    },
    async setI18nLang(lang) {
      await setI18nLang(lang);
      // 为了触发 created 生命周期的获取单词列表事件
      this.$router.go(0);
    }
  }
};
</script>

<style lang="scss">
.header {
  height: $header-h;
  line-height: $header-h;
  padding: 0 24px;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
  background-color: #fff;

  &-container {
    height: $header-h;
    display: flex;
    justify-content: space-between;

    .logo {
      font-size: 30px;
      font-weight: 600;
      margin: 30px;
    }

    .home {
      vertical-align: top;
      margin-right: 24px;
    }

    .menu {
      @extend .home;

      .el-dropdown {
        height: 48px;

        &-current-name {
          color: $buttonColor;
        }
      }
    }

    &-right {
      .el-input {
        width: 300px;
        margin-right: 40px;
      }

      .el-avatar {
        vertical-align: middle;
      }

      &-name {
        height: 48px;
        vertical-align: top;
        margin-left: 8px;
        cursor: pointer;
      }

      & > &-bell {
        margin-left: 26px;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.el-dropdown-menu .svg-icon {
  margin-right: 18px;
}
</style>