element/examples/components/header.vue

479 lines
10 KiB
Vue
Raw Normal View History

2016-08-23 19:15:15 +08:00
<style scoped>
.headerWrapper {
height: 80px;
transition: transform .3s;
&.is-hidden {
transform: translateY(-80px);
}
2016-08-23 19:15:15 +08:00
}
2016-08-22 17:42:04 +08:00
.header {
height: 80px;
2016-09-13 20:02:33 +08:00
background-color: rgba(32, 160, 255, 1);
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
}
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;
&:last-child {
cursor: default;
margin-left: 34px;
span {
opacity: .8;
}
.nav-lang {
cursor: pointer;
display: inline-block;
height: 100%;
&:hover {
opacity: 1;
}
&.active {
font-weight: 700;
opacity: 1;
}
}
}
2016-08-23 19:15:15 +08:00
a {
text-decoration: none;
color: #fff;
2016-08-23 19:15:15 +08:00
display: block;
padding: 0 22px;
2016-09-18 22:01:26 +08:00
opacity: .8;
2016-09-18 22:01:26 +08:00
&.active,
&:hover {
opacity: 1;
}
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;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background:#99d2fc;
}
}
2016-08-22 17:42:04 +08:00
}
2016-08-23 19:15:15 +08:00
}
2016-09-13 20:02:33 +08:00
.header-home {
position: fixed;
top: 0;
background-color: rgba(32, 160, 255, 0);
}
2016-11-18 16:49:07 +08:00
.header-light {
background-color: #fff;
.nav-lang {
color: #888;
&:hover,
&.acive {
font-weight: normal;
opacity: 1;
color: #409EFF;
}
}
.nav-lang-spe {
color: #888;
}
.nav-item {
a {
color: #888;
opacity: 1;
}
a:hover,
a.active {
color: #333;
}
a.active::after {
width: 14px;
left: calc(50% - 7px);
bottom: 15px;
background: #1989fa;
}
}
}
.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;
transform: scale(.6);
font-size: 12px;
color: #979797;
}
@when active {
span, i {
color: #409EFF;
}
i {
transform: rotateZ(180deg) translateY(2px) scale(.6);
}
}
&: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;
&:last-child {
margin-left: 10px;
}
a {
padding: 0 5px;
}
}
}
}
2016-11-18 16:49:07 +08:00
@media (max-width: 700px) {
.header {
.container {
padding: 0 12px;
}
.nav-item a,
.nav-lang {
font-size: 12px;
vertical-align: top;
}
2017-10-03 16:46:07 +08:00
.nav-dropdown {
padding: 0;
}
.nav-gap {
padding: 0 8px;
}
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">
2016-08-23 19:15:15 +08:00
<header class="header"
ref="header"
:style="headerStyle"
:class="{
'header-home': isHome,
'header-light': isComponentPage
}">
2016-08-23 19:15:15 +08:00
<div class="container">
<h1><router-link :to="`/${ lang }`">
<!-- logo -->
<slot v-if="isComponentPage">
<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>
<slot v-else>
<img
src="../assets/images/element-logo-white.svg"
alt="element-logo"
class="nav-logo">
<img
src="../assets/images/element-logo-small-white.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">
<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>
<!-- 版本选择器 -->
<li class="nav-item" v-show="isComponentPage">
<el-dropdown
trigger="click"
class="nav-dropdown"
:class="{ 'is-active': dropdownVisible }">
<span>
{{ langConfig.dropdown }}{{ version }}
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu
slot="dropdown"
class="nav-dropdown-list"
@input="handleDropdownToggle">
<el-dropdown-item
v-for="item in Object.keys(versions)"
:key="item"
@click.native="switchVersion(item)">
{{ item }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</li>
<!-- lang -->
<li class="nav-item">
<span
class="nav-lang"
:class="{ 'active': lang === 'zh-CN' }"
@click="switchLang('zh-CN')">
中文
</span>
<span class="nav-lang-spe"> / </span>
<span
class="nav-lang"
:class="{ 'active': lang === 'en-US' }"
@click="switchLang('en-US')">
En
</span>
</li>
2016-08-23 19:15:15 +08:00
</ul>
</div>
</header>
</div>
2016-08-22 17:42:04 +08:00
</template>
<script>
import bus from '../bus';
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: '',
isHome: true,
headerStyle: {},
visible: true,
versions: [],
version,
dropdownVisible: true,
isComponentPage: true
2016-08-23 19:15:15 +08:00
};
},
watch: {
2016-11-28 16:56:03 +08:00
'$route.path': {
immediate: true,
handler() {
this.handlePathChange();
2016-11-28 16:56:03 +08:00
}
2016-09-13 20:02:33 +08:00
}
2016-08-23 19:15:15 +08:00
},
computed: {
lang() {
return this.$route.path.split('/')[1] || 'zh-CN';
},
langConfig() {
return compoLang.filter(config => config.lang === this.lang)[0]['header'];
}
},
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));
},
handleDropdownToggle(visible) {
this.dropdownVisible = visible;
},
handlePathChange() {
const routerName = this.$route.name;
this.isComponentPage = /^component-/.test(routerName);
this.isHome = /^home/.test(routerName);
if (this.isComponentPage) {
this.headerStyle.backgroundColor = '#fff';
return;
}
this.headerStyle.backgroundColor = `rgba(32, 160, 255, ${ this.isHome ? '0' : '1' })`;
}
},
created() {
this.handlePathChange();
bus.$on('toggleHeader', visible => {
this.visible = visible;
});
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = _ => {
if (xhr.readyState === 4 && xhr.status === 200) {
this.versions = JSON.parse(xhr.responseText);
}
};
xhr.open('GET', '/versions.json');
xhr.send();
},
2016-08-23 19:15:15 +08:00
mounted() {
function scroll(fn) {
2017-09-30 18:13:26 +08:00
document.body.addEventListener('scroll', fn, false);
2016-08-23 19:15:15 +08:00
}
scroll(() => {
2016-09-13 20:02:33 +08:00
if (this.isHome) {
const threshold = 200;
2017-02-20 10:53:35 +08:00
let alpha = Math.min((document.documentElement.scrollTop || document.body.scrollTop), threshold) / threshold;
2016-09-13 20:02:33 +08:00
this.$refs.header.style.backgroundColor = `rgba(32, 160, 255, ${ alpha })`;
2016-08-23 19:15:15 +08:00
}
});
}
2016-08-22 17:42:04 +08:00
};
</script>