element/examples/components/header.vue

167 lines
3.5 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;
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%;
}
h1 {
margin: 0;
float: left;
font-size: 32px;
font-weight: normal;
2016-08-23 19:15:15 +08:00
a {
color: #fff;
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
}
2016-11-09 08:15:40 +08:00
.nav-logo {
vertical-align: sub;
}
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-09-13 20:02:33 +08:00
margin-left: 20px;
2016-08-23 19:15:15 +08:00
a {
text-decoration: none;
color: #fff;
display: block;
padding: 0 20px;
2016-09-18 22:01:26 +08:00
opacity: .8;
&.active,
&:hover {
opacity: 1;
}
2016-08-23 19:15:15 +08:00
2016-09-18 22:01:26 +08:00
&.active::before {
2016-08-23 19:15:15 +08:00
content: '';
display: block;
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-08-22 17:42:04 +08:00
</style>
<template>
2016-08-23 19:15:15 +08:00
<div class="headerWrapper">
<header class="header"
2016-09-13 20:02:33 +08:00
ref="header"
2016-08-23 19:15:15 +08:00
:style="headerStyle"
:class="{
'header-home': isHome
2016-08-23 19:15:15 +08:00
}">
<div class="container">
2016-11-09 08:15:40 +08:00
<h1><router-link to="/">
<img
src="../assets/images/element-logo.svg"
alt="element-logo"
class="nav-logo">
</router-link></h1>
2016-08-23 19:15:15 +08:00
<ul class="nav">
<li class="nav-item">
<router-link
active-class="active"
2016-09-14 11:15:28 +08:00
to="/guide">指南
2016-08-23 19:15:15 +08:00
</router-link>
</li>
<li class="nav-item">
<router-link
active-class="active"
2016-09-14 11:15:28 +08:00
to="/component">组件
2016-08-23 19:15:15 +08:00
</router-link>
</li>
<li class="nav-item">
<router-link
active-class="active"
2016-08-23 19:15:15 +08:00
to="/resource"
exact>资源
</router-link>
</li>
</ul>
</div>
</header>
</div>
2016-08-22 17:42:04 +08:00
</template>
<script>
export default {
2016-08-23 19:15:15 +08:00
data() {
return {
active: '',
2016-09-13 20:02:33 +08:00
isHome: false,
headerStyle: {}
2016-08-23 19:15:15 +08:00
};
},
watch: {
2016-09-13 20:02:33 +08:00
'$route.path'(val) {
this.isHome = val === '/';
this.headerStyle.backgroundColor = `rgba(32, 160, 255, ${ this.isHome ? '0' : '1' })`;
}
2016-08-23 19:15:15 +08:00
},
mounted() {
2016-09-13 20:02:33 +08:00
this.isHome = this.$route.path === '/';
2016-08-23 19:15:15 +08:00
function scroll(fn) {
window.addEventListener('scroll', () => {
fn();
2016-08-23 19:15:15 +08:00
}, false);
}
scroll(() => {
2016-09-13 20:02:33 +08:00
if (this.isHome) {
const threshold = 200;
let alpha = Math.min(document.body.scrollTop, threshold) / threshold;
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>