简介
常见导航栏的设计与封装,以及一些知识点的记录。为了避免组件太细不好管理,这里的导航栏包括了logo以及导航菜单等等。
功能详解
- 导航栏是黏性的,也就是拖动到下方时,导航栏会fix在顶部。
- 其次,导航栏是自适应的,当界面不适合时会折叠,靠按钮展开。
效果
固定时,折叠与未折叠
非固定时,折叠与未折叠
展开时:
代码
<template>
<header :class="header_classList">
<div class="logo" >{{prop_data.logo_text}}</div>
<nav>
<a v-for="(value, key, index) in prop_data.nav_link" :href="value">{{key}}</a>
</nav>
<div class="burger" @click="menu_open">
<div class="burger-line1"></div>
<div class="burger-line2"></div>
<div class="burger-line3"></div>
</div>
</header>
</template>
<script>
export default {
name: "my_header",
props: {
prop_data : {
type: Object,
default:{
logo_text:"Yong的主页",
nav_link:{
'首页': '#home',
'关于我们': '#about-us',
'成功案例':'#showcases',
'服务流程':'#service',
'团队介绍':'#team-intro',
'公司动态':'#company-activties'
}
}
}
},
data(){
return{
header_classList: {
open: false,
sticky: false
}
}
},
methods: {
menu_open(){
this.header_classList.open = !this.header_classList.open;
},
handleScroll(){
this.header_classList.open = false;
if(window.pageYOffset>1000){
this.header_classList.sticky = true;
console.log(window.pageYOffset);
}else{
this.header_classList.sticky = false;
}
}
},
mounted () {
window.addEventListener('scroll', this.handleScroll, true)
},
destroyed () {
// 离开该页面需要移除这个监听的事件,不然会报错
window.removeEventListener('scroll', this.handleScroll)
}
}
</script>
<style scoped>
@import '~assets/css/public.css';
header {
width: 100%;
height: 80px;
display: grid;
padding: 0 40px;
grid-template-columns:1fr 2fr;
align-items: center;
position: relative;
z-index: 200;
}
.logo {
font-size: 24px;
font-weight: 600;
color: var(--text-color-lightest)
}
header nav {
justify-self: end;
}
header nav i {
color: var(--text-color-lightest)
}
header nav a {
color: var(--text-color-lightest);
text-decoration: none;
margin: 0 24px;
}
header .burger{
display: none;
}
/*导航特效*/
header.sticky {
position: fixed;
background-color: white;
box-shadow: 0 0 18px rgba(0,0,0,0.2);
animation: dropDown 0.5s ease-in-out forwards;
}
@keyframes dropDown {
from {
transform: translateY(-100px);
}
to {
transform: translateY(0);
}
}
header.sticky .logo,
header.sticky nav a,
header.sticky nav i {
color: var(--text-color-darker);
}
/*自适应菜单*/
@media (max-width: 1100px) {
header nav {
display: none;
}
header {
grid-template-columns: 1fr 1fr;
}
header .burger {
display: flex;
flex-direction: column;
justify-content: space-around;
width: 20px;
height: 20px;
justify-self: end;
cursor: pointer;
}
.burger-line1,
.burger-line2,
.burger-line3 {
width: 20px;
height: 2px;
background-color: var(--text-color-lightest);
}
/*展开或fix时的样式*/
header.sticky .burger-line1,
header.sticky .burger-line2,
header.sticky .burger-line3,
header.open .burger-line1,
header.open .burger-line2,
header.open .burger-line3 {
background-color: var(--text-color-darker);
z-index: 100;
transition: 0.4s ease;
}
/*展开时的展示*/
header.open nav {
display: grid;
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background-color: white;
grid-auto-rows: max-content;
justify-items: end;
padding: 0 40px;
opacity: 0;
animation: slideDown 0.6s ease-in-out forwards;
}
header.open nav > * {
color: var(--text-color-darker);
animation: showMenu 0.5s linear forwards 0.4s; /*0.4s是延迟*/
font-size: 18px;
margin: 4px 0;
opacity: 0;
}
header.open .burger-line1 {
transform: rotate(45deg) translate(4px, 6px);
}
header.open .burger-line2 {
transform: translateX(5px);
opacity: 0;
}
header.open .burger-line3 {
transform: rotate(-45deg) translate(4px, -6px);
}
header.open .logo {
z-index: 40;
color: var(--text-color-darker);
}
/*展开菜单的动画*/
@keyframes slideDown {
0% {
height: 0;
opacity: 0;
}
100% {
height: 100vh;
padding-top: 80px;
opacity: 1;
}
}
@keyframes showMenu {
0% {
opacity: 0;
transform: translateY(-1vh);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
}
</style>
知识点
v-for遍历对象
这个比较简单,用(value, key, index)即可
css中var的使用
用:root可以设定变量,变量名为–开头的字符串,然后css样式中可以用–导入,比如此例子中,导入了一个外部css文件,正是设置这些颜色变量的公用css文件
轮动条监听
生成组件时,将window事件与自定义函数绑定在一起,销毁时接触。
样式的绑定
利用:class动态绑定类(有数组、对象多种形式),同样,也可以用style动态。