2016-08-23 19:15:15 +08:00
|
|
|
<style scoped>
|
|
|
|
.headerWrapper {
|
|
|
|
height: 80px;
|
|
|
|
}
|
2017-09-29 19:34:35 +08:00
|
|
|
|
2016-08-22 17:42:04 +08:00
|
|
|
.header {
|
|
|
|
height: 80px;
|
2017-10-23 17:50:25 +08:00
|
|
|
background-color: #fff;
|
2016-08-22 17:42:04 +08:00
|
|
|
color: #fff;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
width: 100%;
|
|
|
|
line-height: @height;
|
2016-08-23 19:15:15 +08:00
|
|
|
z-index: 100;
|
|
|
|
position: relative;
|
2016-08-22 17:42:04 +08:00
|
|
|
|
|
|
|
.container {
|
|
|
|
height: 100%;
|
2016-11-18 16:49:07 +08:00
|
|
|
box-sizing: border-box;
|
2016-08-22 17:42:04 +08:00
|
|
|
}
|
|
|
|
|
2017-10-23 17:50:25 +08:00
|
|
|
.nav-lang-spe {
|
|
|
|
color: #888;
|
|
|
|
}
|
|
|
|
|
2016-08-22 17:42:04 +08:00
|
|
|
h1 {
|
|
|
|
margin: 0;
|
|
|
|
float: left;
|
|
|
|
font-size: 32px;
|
|
|
|
font-weight: normal;
|
|
|
|
|
2016-08-23 19:15:15 +08:00
|
|
|
a {
|
2017-09-29 11:36:38 +08:00
|
|
|
color: #333;
|
2016-08-23 19:15:15 +08:00
|
|
|
text-decoration: none;
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
|
2016-08-22 17:42:04 +08:00
|
|
|
span {
|
|
|
|
font-size: 12px;
|
|
|
|
display: inline-block;
|
|
|
|
width: 34px;
|
|
|
|
height: 18px;
|
2016-09-14 11:15:28 +08:00
|
|
|
border: 1px solid rgba(255, 255, 255, .5);
|
2016-08-22 17:42:04 +08:00
|
|
|
text-align: center;
|
|
|
|
line-height: 18px;
|
|
|
|
vertical-align: middle;
|
|
|
|
margin-left: 10px;
|
|
|
|
border-radius: 3px;
|
|
|
|
}
|
|
|
|
}
|
2017-09-29 19:34:35 +08:00
|
|
|
|
2016-08-23 19:15:15 +08:00
|
|
|
.nav {
|
2016-08-22 17:42:04 +08:00
|
|
|
float: right;
|
|
|
|
height: 100%;
|
|
|
|
line-height: 80px;
|
|
|
|
background: transparent;
|
2016-08-23 19:15:15 +08:00
|
|
|
@utils-clearfix;
|
|
|
|
padding: 0;
|
|
|
|
margin: 0;
|
2016-08-22 17:42:04 +08:00
|
|
|
}
|
2017-09-29 19:34:35 +08:00
|
|
|
|
|
|
|
.nav-gap {
|
|
|
|
position: relative;
|
|
|
|
width: 1px;
|
|
|
|
height: 80px;
|
|
|
|
padding: 0 20px;
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
content: '';
|
|
|
|
position: absolute;
|
|
|
|
top: calc(50% - 8px);
|
|
|
|
width: 1px;
|
|
|
|
height: 16px;
|
|
|
|
background: #ebebeb;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-11-18 16:49:07 +08:00
|
|
|
.nav-logo,
|
|
|
|
.nav-logo-small {
|
2016-11-09 08:15:40 +08:00
|
|
|
vertical-align: sub;
|
|
|
|
}
|
2017-09-29 19:34:35 +08:00
|
|
|
|
2016-11-18 16:49:07 +08:00
|
|
|
.nav-logo-small {
|
|
|
|
display: none;
|
|
|
|
}
|
2017-09-29 19:34:35 +08:00
|
|
|
|
2016-08-23 19:15:15 +08:00
|
|
|
.nav-item {
|
2016-08-22 17:42:04 +08:00
|
|
|
margin: 0;
|
2016-08-23 19:15:15 +08:00
|
|
|
float: left;
|
|
|
|
list-style: none;
|
|
|
|
position: relative;
|
|
|
|
cursor: pointer;
|
2016-11-10 21:46:55 +08:00
|
|
|
|
2017-10-16 14:07:24 +08:00
|
|
|
&.nav-algolia-search {
|
|
|
|
cursor: default;
|
|
|
|
}
|
|
|
|
|
2017-10-04 20:34:46 +08:00
|
|
|
&.lang-item,
|
2016-11-10 21:46:55 +08:00
|
|
|
&:last-child {
|
|
|
|
cursor: default;
|
|
|
|
margin-left: 34px;
|
2017-09-29 19:34:35 +08:00
|
|
|
|
2016-11-10 21:46:55 +08:00
|
|
|
span {
|
|
|
|
opacity: .8;
|
|
|
|
}
|
|
|
|
|
|
|
|
.nav-lang {
|
|
|
|
cursor: pointer;
|
|
|
|
display: inline-block;
|
|
|
|
height: 100%;
|
2017-10-23 17:50:25 +08:00
|
|
|
color: #888;
|
2017-09-29 19:34:35 +08:00
|
|
|
|
2016-11-10 21:46:55 +08:00
|
|
|
&:hover {
|
2017-10-04 20:34:46 +08:00
|
|
|
color: #409EFF;
|
2016-11-10 21:46:55 +08:00
|
|
|
}
|
2017-10-23 17:50:25 +08:00
|
|
|
&.active {
|
|
|
|
font-weight: bold;
|
|
|
|
color: #409EFF;
|
|
|
|
}
|
2016-11-10 21:46:55 +08:00
|
|
|
}
|
|
|
|
}
|
2016-08-23 19:15:15 +08:00
|
|
|
|
|
|
|
a {
|
|
|
|
text-decoration: none;
|
2017-10-23 17:50:25 +08:00
|
|
|
color: #888;
|
2016-08-23 19:15:15 +08:00
|
|
|
display: block;
|
2017-09-29 19:34:35 +08:00
|
|
|
padding: 0 22px;
|
|
|
|
|
2016-09-18 22:01:26 +08:00
|
|
|
&.active,
|
|
|
|
&:hover {
|
2017-10-23 17:50:25 +08:00
|
|
|
color: #333;
|
2016-09-18 22:01:26 +08:00
|
|
|
}
|
2016-08-23 19:15:15 +08:00
|
|
|
|
2017-09-29 19:34:35 +08:00
|
|
|
&.active::after {
|
2016-08-23 19:15:15 +08:00
|
|
|
content: '';
|
2017-09-29 19:34:35 +08:00
|
|
|
display: inline-block;
|
2016-08-23 19:15:15 +08:00
|
|
|
position: absolute;
|
2017-10-23 17:50:25 +08:00
|
|
|
bottom: 15px;
|
|
|
|
left: calc(50% - 7px);
|
|
|
|
width: 14px;
|
2016-08-23 19:15:15 +08:00
|
|
|
height: 4px;
|
2017-10-23 17:50:25 +08:00
|
|
|
background: #409EFF;
|
2016-08-23 19:15:15 +08:00
|
|
|
}
|
|
|
|
}
|
2016-08-22 17:42:04 +08:00
|
|
|
}
|
2016-08-23 19:15:15 +08:00
|
|
|
}
|
2017-09-29 19:34:35 +08:00
|
|
|
|
|
|
|
.nav-dropdown {
|
|
|
|
margin-bottom: 6px;
|
|
|
|
padding-left: 18px;
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
span {
|
|
|
|
display: block;
|
|
|
|
width: 100%;
|
|
|
|
font-size: 16px;
|
|
|
|
color: #888;
|
|
|
|
line-height: 40px;
|
|
|
|
transition: .2s;
|
|
|
|
padding-bottom: 6px;
|
|
|
|
user-select: none;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
i {
|
|
|
|
transition: .2s;
|
|
|
|
font-size: 12px;
|
|
|
|
color: #979797;
|
2017-10-23 17:50:25 +08:00
|
|
|
transform: translateY(-2px);
|
2017-09-29 19:34:35 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
@when active {
|
|
|
|
span, i {
|
2017-09-30 15:50:04 +08:00
|
|
|
color: #409EFF;
|
2017-09-29 19:34:35 +08:00
|
|
|
}
|
|
|
|
i {
|
2017-10-23 17:50:25 +08:00
|
|
|
transform: rotateZ(180deg) translateY(3px);
|
2017-09-29 19:34:35 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
span, i {
|
2017-09-30 15:50:04 +08:00
|
|
|
color: #409EFF;
|
2017-09-29 19:34:35 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2017-09-30 18:13:26 +08:00
|
|
|
|
|
|
|
.nav-dropdown-list {
|
|
|
|
width: auto;
|
|
|
|
}
|
2017-09-29 19:34:35 +08:00
|
|
|
|
2016-11-18 16:49:07 +08:00
|
|
|
@media (max-width: 850px) {
|
|
|
|
.header {
|
|
|
|
.nav-logo {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
.nav-logo-small {
|
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
.nav-item {
|
|
|
|
margin-left: 6px;
|
|
|
|
|
2017-10-04 20:34:46 +08:00
|
|
|
&.lang-item,
|
2016-11-18 16:49:07 +08:00
|
|
|
&:last-child {
|
|
|
|
margin-left: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
a {
|
|
|
|
padding: 0 5px;
|
|
|
|
}
|
|
|
|
}
|
2017-10-16 14:07:24 +08:00
|
|
|
.nav-theme-switch, .nav-algolia-search {
|
|
|
|
display: none;
|
|
|
|
}
|
2016-11-18 16:49:07 +08:00
|
|
|
}
|
|
|
|
}
|
2017-09-29 19:34:35 +08:00
|
|
|
|
2016-11-18 16:49:07 +08:00
|
|
|
@media (max-width: 700px) {
|
|
|
|
.header {
|
|
|
|
.container {
|
|
|
|
padding: 0 12px;
|
|
|
|
}
|
2017-12-12 12:45:09 +08:00
|
|
|
.nav-item {
|
|
|
|
a {
|
|
|
|
font-size: 12px;
|
|
|
|
vertical-align: top;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.lang-item {
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
.nav-lang {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
span {
|
|
|
|
padding-bottom: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2016-11-18 16:49:07 +08:00
|
|
|
}
|
2017-10-03 16:46:07 +08:00
|
|
|
.nav-dropdown {
|
|
|
|
padding: 0;
|
2017-12-12 12:45:09 +08:00
|
|
|
span {
|
|
|
|
font-size: 12px;
|
|
|
|
}
|
2017-10-03 16:46:07 +08:00
|
|
|
}
|
|
|
|
.nav-gap {
|
|
|
|
padding: 0 8px;
|
|
|
|
}
|
2017-12-12 12:45:09 +08:00
|
|
|
.nav-versions {
|
|
|
|
display: none;
|
|
|
|
}
|
2016-11-18 16:49:07 +08:00
|
|
|
}
|
|
|
|
}
|
2016-08-22 17:42:04 +08:00
|
|
|
</style>
|
|
|
|
<template>
|
2017-09-30 18:13:26 +08:00
|
|
|
<div class="headerWrapper">
|
2017-10-23 17:50:25 +08:00
|
|
|
<header class="header" ref="header">
|
2016-08-23 19:15:15 +08:00
|
|
|
<div class="container">
|
2016-11-10 21:46:55 +08:00
|
|
|
<h1><router-link :to="`/${ lang }`">
|
2017-09-29 19:34:35 +08:00
|
|
|
<!-- logo -->
|
2017-10-23 17:50:25 +08:00
|
|
|
<slot>
|
2017-09-29 19:34:35 +08:00
|
|
|
<img
|
2017-10-16 14:07:24 +08:00
|
|
|
src="../assets/images/element-logo.svg"
|
|
|
|
alt="element-logo"
|
|
|
|
class="nav-logo">
|
2017-09-29 19:34:35 +08:00
|
|
|
<img
|
2017-10-16 14:07:24 +08:00
|
|
|
src="../assets/images/element-logo-small.svg"
|
|
|
|
alt="element-logo"
|
|
|
|
class="nav-logo-small">
|
2017-09-29 19:34:35 +08:00
|
|
|
</slot>
|
|
|
|
|
2016-11-09 08:15:40 +08:00
|
|
|
</router-link></h1>
|
2017-09-29 19:34:35 +08:00
|
|
|
|
|
|
|
<!-- nav -->
|
2016-08-23 19:15:15 +08:00
|
|
|
<ul class="nav">
|
2017-10-16 14:07:24 +08:00
|
|
|
<li class="nav-item nav-algolia-search" v-show="isComponentPage">
|
2017-10-10 18:06:01 +08:00
|
|
|
<algolia-search></algolia-search>
|
|
|
|
</li>
|
2016-08-23 19:15:15 +08:00
|
|
|
<li class="nav-item">
|
|
|
|
<router-link
|
|
|
|
active-class="active"
|
2016-11-10 21:46:55 +08:00
|
|
|
:to="`/${ lang }/guide`">{{ langConfig.guide }}
|
2016-08-23 19:15:15 +08:00
|
|
|
</router-link>
|
|
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
|
|
<router-link
|
|
|
|
active-class="active"
|
2016-11-10 21:46:55 +08:00
|
|
|
:to="`/${ lang }/component`">{{ langConfig.components }}
|
2016-08-23 19:15:15 +08:00
|
|
|
</router-link>
|
|
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
|
|
<router-link
|
2016-08-25 18:24:51 +08:00
|
|
|
active-class="active"
|
2016-11-10 21:46:55 +08:00
|
|
|
:to="`/${ lang }/resource`"
|
|
|
|
exact>{{ langConfig.resource }}
|
2016-08-23 19:15:15 +08:00
|
|
|
</router-link>
|
|
|
|
</li>
|
2017-09-29 19:34:35 +08:00
|
|
|
|
|
|
|
<!-- gap -->
|
|
|
|
<li class="nav-item" v-show="isComponentPage">
|
|
|
|
<div class="nav-gap"></div>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<!-- 版本选择器 -->
|
2017-12-12 12:45:09 +08:00
|
|
|
<li class="nav-item nav-versions" v-show="isComponentPage">
|
2017-09-29 19:34:35 +08:00
|
|
|
<el-dropdown
|
2017-12-12 12:45:09 +08:00
|
|
|
trigger="click"
|
|
|
|
class="nav-dropdown"
|
|
|
|
:class="{ 'is-active': verDropdownVisible }">
|
2017-09-29 19:34:35 +08:00
|
|
|
<span>
|
2017-12-12 12:45:09 +08:00
|
|
|
{{ version }}
|
2017-09-29 19:34:35 +08:00
|
|
|
<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
|
</span>
|
|
|
|
<el-dropdown-menu
|
2017-12-12 12:45:09 +08:00
|
|
|
slot="dropdown"
|
|
|
|
class="nav-dropdown-list"
|
|
|
|
@input="handleVerDropdownToggle">
|
2017-09-29 19:34:35 +08:00
|
|
|
<el-dropdown-item
|
2017-12-12 12:45:09 +08:00
|
|
|
v-for="item in Object.keys(versions)"
|
|
|
|
:key="item"
|
|
|
|
@click.native="switchVersion(item)">
|
2017-09-29 19:34:35 +08:00
|
|
|
{{ item }}
|
|
|
|
</el-dropdown-item>
|
|
|
|
</el-dropdown-menu>
|
|
|
|
</el-dropdown>
|
|
|
|
</li>
|
|
|
|
|
2017-12-12 12:45:09 +08:00
|
|
|
<!-- 语言选择器 -->
|
2017-10-04 20:34:46 +08:00
|
|
|
<li class="nav-item lang-item">
|
2017-12-12 12:45:09 +08:00
|
|
|
<el-dropdown
|
|
|
|
trigger="click"
|
|
|
|
class="nav-dropdown nav-lang"
|
|
|
|
:class="{ 'is-active': langDropdownVisible }">
|
|
|
|
<span>
|
|
|
|
{{ displayedLang }}
|
|
|
|
<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
|
</span>
|
|
|
|
<el-dropdown-menu
|
|
|
|
slot="dropdown"
|
|
|
|
class="nav-dropdown-list"
|
|
|
|
@input="handleLangDropdownToggle">
|
|
|
|
<el-dropdown-item
|
|
|
|
v-for="(value, key) in langs"
|
|
|
|
:key="key"
|
|
|
|
@click.native="switchLang(key)">
|
|
|
|
{{ value }}
|
|
|
|
</el-dropdown-item>
|
|
|
|
</el-dropdown-menu>
|
|
|
|
</el-dropdown>
|
2016-11-10 21:46:55 +08:00
|
|
|
</li>
|
2017-10-04 20:34:46 +08:00
|
|
|
|
|
|
|
<!--theme picker-->
|
2017-10-16 14:07:24 +08:00
|
|
|
<li class="nav-item nav-theme-switch" v-show="isComponentPage">
|
2017-10-04 20:34:46 +08:00
|
|
|
<theme-picker></theme-picker>
|
|
|
|
</li>
|
2016-08-23 19:15:15 +08:00
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</header>
|
|
|
|
</div>
|
2016-08-22 17:42:04 +08:00
|
|
|
</template>
|
|
|
|
<script>
|
2017-10-04 20:34:46 +08:00
|
|
|
import ThemePicker from './theme-picker.vue';
|
2017-10-10 18:06:01 +08:00
|
|
|
import AlgoliaSearch from './search.vue';
|
2016-11-10 21:46:55 +08:00
|
|
|
import compoLang from '../i18n/component.json';
|
2019-01-23 11:34:19 +08:00
|
|
|
import Element from 'main/index.js';
|
|
|
|
const { version } = Element;
|
2016-11-10 21:46:55 +08:00
|
|
|
|
2016-08-22 17:42:04 +08:00
|
|
|
export default {
|
2016-08-23 19:15:15 +08:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
active: '',
|
2017-09-29 19:34:35 +08:00
|
|
|
versions: [],
|
|
|
|
version,
|
2017-12-12 12:45:09 +08:00
|
|
|
verDropdownVisible: true,
|
|
|
|
langDropdownVisible: true,
|
|
|
|
langs: {
|
|
|
|
'zh-CN': '中文',
|
|
|
|
'en-US': 'English',
|
|
|
|
'es': 'Español'
|
|
|
|
}
|
2016-08-23 19:15:15 +08:00
|
|
|
};
|
|
|
|
},
|
2017-10-04 20:34:46 +08:00
|
|
|
|
2017-10-10 18:06:01 +08:00
|
|
|
components: {
|
|
|
|
ThemePicker,
|
|
|
|
AlgoliaSearch
|
|
|
|
},
|
2017-10-04 20:34:46 +08:00
|
|
|
|
2016-11-10 21:46:55 +08:00
|
|
|
computed: {
|
|
|
|
lang() {
|
|
|
|
return this.$route.path.split('/')[1] || 'zh-CN';
|
|
|
|
},
|
2017-12-12 12:45:09 +08:00
|
|
|
displayedLang() {
|
|
|
|
return this.langs[this.lang] || '中文';
|
|
|
|
},
|
2016-11-10 21:46:55 +08:00
|
|
|
langConfig() {
|
|
|
|
return compoLang.filter(config => config.lang === this.lang)[0]['header'];
|
2017-10-16 14:07:24 +08:00
|
|
|
},
|
|
|
|
isComponentPage() {
|
|
|
|
return /^component/.test(this.$route.name);
|
2016-11-10 21:46:55 +08:00
|
|
|
}
|
|
|
|
},
|
2017-09-29 19:34:35 +08:00
|
|
|
|
2016-11-10 21:46:55 +08:00
|
|
|
methods: {
|
2017-09-29 19:34:35 +08:00
|
|
|
switchVersion(version) {
|
|
|
|
if (version === this.version) return;
|
|
|
|
location.href = `${ location.origin }/${ this.versions[version] }/${ location.hash } `;
|
|
|
|
},
|
|
|
|
|
2016-11-10 21:46:55 +08:00
|
|
|
switchLang(targetLang) {
|
|
|
|
if (this.lang === targetLang) return;
|
2016-11-11 16:58:44 +08:00
|
|
|
localStorage.setItem('ELEMENT_LANGUAGE', targetLang);
|
2016-11-10 21:46:55 +08:00
|
|
|
this.$router.push(this.$route.path.replace(this.lang, targetLang));
|
2017-09-29 19:34:35 +08:00
|
|
|
},
|
|
|
|
|
2017-12-12 12:45:09 +08:00
|
|
|
handleVerDropdownToggle(visible) {
|
|
|
|
this.verDropdownVisible = visible;
|
|
|
|
},
|
|
|
|
|
|
|
|
handleLangDropdownToggle(visible) {
|
|
|
|
this.langDropdownVisible = visible;
|
2016-11-10 21:46:55 +08:00
|
|
|
}
|
|
|
|
},
|
2017-09-29 19:34:35 +08:00
|
|
|
|
2017-09-29 11:36:38 +08:00
|
|
|
created() {
|
2017-09-29 19:34:35 +08:00
|
|
|
const xhr = new XMLHttpRequest();
|
|
|
|
xhr.onreadystatechange = _ => {
|
|
|
|
if (xhr.readyState === 4 && xhr.status === 200) {
|
2017-10-26 12:50:28 +08:00
|
|
|
const versions = JSON.parse(xhr.responseText);
|
2018-02-01 15:16:21 +08:00
|
|
|
this.versions = Object.keys(versions).reduce((prev, next) => {
|
2017-10-26 12:50:28 +08:00
|
|
|
prev[next] = versions[next];
|
|
|
|
return prev;
|
|
|
|
}, {});
|
2017-09-29 19:34:35 +08:00
|
|
|
}
|
|
|
|
};
|
|
|
|
xhr.open('GET', '/versions.json');
|
|
|
|
xhr.send();
|
2016-08-23 19:15:15 +08:00
|
|
|
}
|
2016-08-22 17:42:04 +08:00
|
|
|
};
|
|
|
|
</script>
|