saas-one/frontend/saas-help-web/src/components/PageHeader.vue

<template>
  <header class="navbar">
    <div class="navbar__left">
      <router-link class="logo__wrp" to="/doc">
        <img src="@/assets/images/logo.png" />
        <span class="logo__title">云系统帮助中心</span>
      </router-link>
      <span class="dot" v-if="selection"></span>
      <div class="dropdown-wrapper" v-if="selection">
        <a class="dropdown-title">
          <span class="title">{{selection.name}}</span>
          <span class="arrow right"></span>
        </a>
        <ul class="nav-dropdown">
          <li
            class="dropdown-item"
            v-for="project in projects"
            :key="project.id"
            :class="{'selected':selection.id==project.id}"
          >
            <router-link
              :to="'/doc/'+project.code+(project.homepage?'/'+project.homepage:'')"
              class="nav-link external"
            >{{project.name}}</router-link>
          </li>
        </ul>
      </div>
    </div>
    <div class="navbar__right">
      <search-box />
    </div>
  </header>
</template>

<script>
import SearchBox from "@/components/SearchBox.vue";

export default {
  components: {
    SearchBox
  },
  data() {
    return {
      projects: [],
      selection: {}
    };
  },
  created() {
    this.getProjects();
  },
  watch: {
    $route: function() {
      this.selectByRoute();
    }
  },
  methods: {
    getProjects() {
      var me = this;
      me.$ajax({
        url: "/api/help/project/list"
      }).then(function(res) {
        if (res.success) {
          me.projects = res.data;
          me.selectByRoute();
        }
      });
    },
    selectByRoute() {
      var me = this,
        projectCode = me.$route.params.projectCode;
      if (projectCode) {
        me.selection = me.projects.find(i => i.code == projectCode);
      }
    }
  }
};
</script>

<style scoped>
.navbar__right {
  width: 30%;
}
.dot {
  display: inline-block;
  vertical-align: middle;
  width: 3px;
  height: 3px;
  border-radius: 3px;
  background-color: #222;
  margin: 0 10px;
}
.dropdown-wrapper {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
.dropdown-wrapper .dropdown-title {
  cursor: pointer;
}
.dropdown-wrapper .title {
  font-size: 16px;
  font-weight: 500;
  vertical-align: middle;
}
.dropdown-title .arrow {
  display: inline-block;
  vertical-align: middle;
  margin-left: 2px;
  width: 12px;
  height: 12px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.99427682 1.3995186L3.88640626.5l4.86067483 4.90093365c.3281374.33085521.331048.86434278 0 1.1981327L3.88640626 11.5l-.89212944-.89951856L7.55696751 6 2.99427682 1.3995186z' fill='%23000' fill-rule='evenodd' fill-opacity='.9'/%3e%3c/svg%3e");
  transform: rotate(90deg);
}
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 0 solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 12px 0;
  box-sizing: border-box;
  list-style: none;
  display: none;
}
.dropdown-wrapper:hover .nav-dropdown {
  display: block;
}
.dropdown-item .nav-link {
  display: block;
  padding: 12px 28px;
  white-space: nowrap;
  font-size: 14px;
  transition: color 0.3s;
}
.dropdown-item.selected {
  font-weight: 500;
}
.dropdown-item.selected .nav-link {
  color: var(--color-primary);
}
</style>