luban-app-store-web/components/common/Header.vue

<template>
    <div class="header">
        <el-row class="header-content">
            <el-col :span="4" class="header-brand">
                <a href="/">应用市场</a>
            </el-col>
            <el-col :span="14">
                <search class="header-search"></search>
            </el-col>
            <el-col :span="6">
                <div class="pull-right">
                    <el-button type="text" icon="el-icon-circle-plus-outline" class="header-btn mr-5" @click="goAppSubmitPage">提交应用</el-button>
                    <el-button type="text" class="header-btn" @click="goLoginPage" v-if="!isLogin">登录</el-button>
                    <el-dropdown v-if="isLogin">
                      <span class="el-dropdown-link">
                        {{userInfo.userName}}<i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item><nuxt-link to="/my/home">我的账号</nuxt-link></el-dropdown-item>
                        <el-dropdown-item><nuxt-link to="/my/apps">我的应用</nuxt-link></el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<style scoped>
    .header {
        height: 64px;
        line-height: 64px;
        box-shadow: 0 0 8px rgba(0,0,0,.08);
        overflow: hidden;
        font-size: 14px;
        background: #fff;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
    }
    .header-content {
        max-width: 1206px;
        margin: 0 auto;
    }
    .header-brand {
        float: left;
        font-family: Andale Mono,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Arial,sans-serif;
        font-size: 21px;
        color: rgba(0,0,0,.65);
        letter-spacing: -1px;
        font-weight: 400;
        text-transform: uppercase;
    }
    .header-search {
        width: 668px
    }
    .header-btn {
        color: rgba(0,0,0,.65);
    }
    .header-btn:focus,.header-btn:hover {
        color: #409EFF;
    }
</style>
<script>
    import Search from './Search.vue'

    export default{
      components:{
          Search
      },
      computed: {
        isLogin () {
          return this.$store.state.account.user.logged
        },
        userInfo () {
          return this.$store.state.account.user.data
        }
      },
      methods: {
        goAppSubmitPage () {
          this.$router.push({ path: '/app/submit' })
        },
        goLoginPage () {
          // TODO add login operations
          const user = { userName: 'ABC', icon: '/icon.jpg', pass: '123456' }
          this.$store.commit('account/REQUEST_USER_INFO_SUCCESS', user)
          this.$message({
            message: '模拟登录成功',
            type: 'success'
          });
        }
      }
    }
</script>