element/examples/components/header.vue

445 lines
9.6 KiB
Vue
Raw Normal View History

2016-08-23 19:15:15 +08:00
<style scoped>
.headerWrapper {
height: 80px;
}
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 {
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;
}
}
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
}
.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;
}
2016-11-18 16:49:07 +08:00
.nav-logo-small {
display: none;
}
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;
&.nav-algolia-search {
cursor: default;
}
&.lang-item,
&:last-child {
cursor: default;
margin-left: 34px;
span {
opacity: .8;
}
.nav-lang {
cursor: pointer;
display: inline-block;
height: 100%;
2017-10-23 17:50:25 +08:00
color: #888;
&:hover {
color: #409EFF;
}
2017-10-23 17:50:25 +08:00
&.active {
font-weight: bold;
color: #409EFF;
}
}
}
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;
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
&.active::after {
2016-08-23 19:15:15 +08:00
content: '';
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
}
.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);
}
@when active {
span, i {
color: #409EFF;
}
i {
2017-10-23 17:50:25 +08:00
transform: rotateZ(180deg) translateY(3px);
}
}
&:hover {
span, i {
color: #409EFF;
}
}
}
2017-09-30 18:13:26 +08:00
.nav-dropdown-list {
width: auto;
}
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;
&.lang-item,
2016-11-18 16:49:07 +08:00
&:last-child {
margin-left: 10px;
}
a {
padding: 0 5px;
}
}
.nav-theme-switch, .nav-algolia-search {
display: none;
}
2016-11-18 16:49:07 +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">
<h1><router-link :to="`/${ lang }`">
<!-- logo -->
2017-10-23 17:50:25 +08:00
<slot>
<img
src="../assets/images/element-logo.svg"
alt="element-logo"
class="nav-logo">
<img
src="../assets/images/element-logo-small.svg"
alt="element-logo"
class="nav-logo-small">
</slot>
2016-11-09 08:15:40 +08:00
</router-link></h1>
<!-- nav -->
2016-08-23 19:15:15 +08:00
<ul class="nav">
<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"
: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"
:to="`/${ lang }/component`">{{ langConfig.components }}
2016-08-23 19:15:15 +08:00
</router-link>
</li>
<li class="nav-item">
<router-link
active-class="active"
:to="`/${ lang }/resource`"
exact>{{ langConfig.resource }}
2016-08-23 19:15:15 +08:00
</router-link>
</li>
<!-- 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">
<el-dropdown
2017-12-12 12:45:09 +08:00
trigger="click"
class="nav-dropdown"
:class="{ 'is-active': verDropdownVisible }">
<span>
2017-12-12 12:45:09 +08:00
{{ version }}
<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">
<el-dropdown-item
2017-12-12 12:45:09 +08:00
v-for="item in Object.keys(versions)"
:key="item"
@click.native="switchVersion(item)">
{{ item }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</li>
2017-12-12 12:45:09 +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>
</li>
<!--theme picker-->
<li class="nav-item nav-theme-switch" v-show="isComponentPage">
<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>
import ThemePicker from './theme-picker.vue';
2017-10-10 18:06:01 +08:00
import AlgoliaSearch from './search.vue';
import compoLang from '../i18n/component.json';
import { version } from 'main/index.js';
2016-08-22 17:42:04 +08:00
export default {
2016-08-23 19:15:15 +08:00
data() {
return {
active: '',
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-10 18:06:01 +08:00
components: {
ThemePicker,
AlgoliaSearch
},
computed: {
lang() {
return this.$route.path.split('/')[1] || 'zh-CN';
},
2017-12-12 12:45:09 +08:00
displayedLang() {
return this.langs[this.lang] || '中文';
},
langConfig() {
return compoLang.filter(config => config.lang === this.lang)[0]['header'];
},
isComponentPage() {
return /^component/.test(this.$route.name);
}
},
methods: {
switchVersion(version) {
if (version === this.version) return;
location.href = `${ location.origin }/${ this.versions[version] }/${ location.hash } `;
},
switchLang(targetLang) {
if (this.lang === targetLang) return;
2016-11-11 16:58:44 +08:00
localStorage.setItem('ELEMENT_LANGUAGE', targetLang);
this.$router.push(this.$route.path.replace(this.lang, targetLang));
},
2017-12-12 12:45:09 +08:00
handleVerDropdownToggle(visible) {
this.verDropdownVisible = visible;
},
handleLangDropdownToggle(visible) {
this.langDropdownVisible = visible;
}
},
created() {
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;
}, {});
}
};
xhr.open('GET', '/versions.json');
xhr.send();
2016-08-23 19:15:15 +08:00
}
2016-08-22 17:42:04 +08:00
};
</script>