element/examples/components/header.vue

486 lines
11 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: 80px;
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;
border-bottom: 1px solid #DCDFE6;
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
padding: 0;
margin: 0;
&::before, &::after {
display: table;
content: "";
}
&::after {
clear: both;
}
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;
color: #1989FA;
opacity: 0.5;
2016-08-23 19:15:15 +08:00
display: block;
padding: 0 22px;
2016-09-18 22:01:26 +08:00
&.active,
&:hover {
opacity: 1;
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;
bottom: 0;
left: calc(50% - 15px);
width: 30px;
height: 2px;
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-configurator :key="lang" v-if="showThemeConfigurator"></theme-configurator>
<theme-picker v-else></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';
import ThemeConfigurator from './theme-configurator';
2017-10-10 18:06:01 +08:00
import AlgoliaSearch from './search.vue';
import compoLang from '../i18n/component.json';
import Element from 'main/index.js';
2019-03-04 16:17:48 +08:00
import { getVars } from './theme-configurator/utils/api.js';
import bus from '../bus';
const { version } = Element;
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',
I18n: French translation (#12153) * Docs: add french translation (fr-FR) in "components.json". * Docs: add french translation (fr-FR) in "page.json" * Docs: add french translation (fr-FR) in "route.json" * Docs: add french translation (fr-FR) in "title.json" * Docs: remove a comma in "title.json" * Docs: translate alert.md into french (fr-FR) * Docs: remove a comma in "component.json" * Docs: translate badge.md into french (fr-FR) * * a77b5518 Docs: translate breadcrumb.md into french (fr-FR) * * a77b5518 Docs: translate breadcrumb.md into french (fr-FR) * Docs: translate button.md into french (fr-FR) * Docs: translate card.md into french (fr-FR) * Docs: translate carousel.md into french (fr-FR) * Docs: translate cascader.md into french (fr-FR) * Docs: translate checkbox.md into french (fr-FR) * Docs: translate collapse.md into french (fr-FR) * Docs: translate color-picker.md into french (fr-FR) * Docs: translate color.md into french (fr-FR) * Docs: translate container.md into french (fr-FR) * Docs: translate custom-theme.md into french (fr-FR) * Docs: translate date-picker.md into french (fr-FR) * Docs: translate datetime-picker.md into french (fr-FR) * Docs: translate dialog.md into french (fr-FR) * Docs: translate form.md into french (fr-FR) * Docs: translate i18n.md into french (fr-FR) * Docs: translate icon.md into french (fr-FR) * Docs: translate input-number.md into french (fr-FR) * Docs: translate input.md into french (fr-FR) * Docs: translate installation.md into french (fr-FR) * Docs: translate dropdown.md into french (fr-FR) * Docs: translate layout.md into french (fr-FR) * Docs: translate loading.md into french (fr-FR) * Docs: translate menu.md into french (fr-FR) * Docs: translate message-box.md into french (fr-FR) * Docs: translate message.md into french (fr-FR) * Docs: translate notification.md into french (fr-FR) * Docs: translate pagination.md into french (fr-FR) * Docs: translate popover.md into french (fr-FR) * Docs: translate progress.md into french (fr-FR) * Docs: translate quickstart.md into french (fr-FR) * Docs: translate radio.md into french (fr-FR) * Docs: translate rate.md into french (fr-FR) * Docs: translate select.md into french (fr-FR) * Docs: translate slider.md into french (fr-FR) * Docs: translate steps.md into french (fr-FR) * Docs: translate switch.md into french (fr-FR) * Docs: translate table.md into french (fr-FR) * Docs: translate tabs.md into french (fr-FR) * Docs: translate tag.md into french (fr-FR) * Docs: translate time-picker.md into french (fr-FR) * Docs: translate tooltip.md into french (fr-FR) * Docs: translate transfer.md into french (fr-FR) * Docs: translate transition.md into french (fr-FR) * Docs: translate tree.md into french (fr-FR) * Docs: translate typography.md into french (fr-FR) * Docs: translate upload.md into french (fr-FR) * Docs: update the configuration for the french translation * Docs: update the french documentation from 2.4.4 to 2.4.11 * Changelog: translate to line 408 into french (fr-FR) * Changelog: finish the translation into french (fr-FR) * Changelog: update from 2.4.11 to 2.5.4 * Doc: update french translation from 2.4.11 to 2.5.4 * Changelog: fix a display bug with the subtitles * Examples: add french language (fr-FR) in search.vue component * Doc: change some french titles * Doc: add the french locale to app.vue
2019-02-12 09:08:19 +08:00
'es': 'Español',
'fr-FR': 'Français'
2019-03-04 16:17:48 +08:00
},
showThemeConfigurator: false
2016-08-23 19:15:15 +08:00
};
},
2017-10-10 18:06:01 +08:00
components: {
ThemePicker,
ThemeConfigurator,
2017-10-10 18:06:01 +08:00
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);
}
},
2019-03-04 16:17:48 +08:00
mounted() {
const host = location.hostname;
this.showThemeConfigurator = host.match('localhost') || host.match('elenet');
if (!this.showThemeConfigurator) {
getVars()
.then(() => {
this.showThemeConfigurator = true;
ga('send', 'event', 'DocView', 'Inner');
2019-03-04 16:17:48 +08:00
})
.catch((err) => {
console.error(err);
});
}
},
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();
let primaryLast = '#409EFF';
bus.$on('user-theme-config-update', (val) => {
let primaryColor = val.global['$--color-primary'];
if (!primaryColor) primaryColor = '#409EFF';
const base64svg = 'data:image/svg+xml;base64,';
const imgSet = document.querySelectorAll('h1 img');
imgSet.forEach((img) => {
img.src = `${base64svg}${window.btoa(window.atob(img.src.replace(base64svg, '')).replace(primaryLast, primaryColor))}`;
});
primaryLast = primaryColor;
});
2016-08-23 19:15:15 +08:00
}
2016-08-22 17:42:04 +08:00
};
</script>