Vue实现⽹页版响应式顶部导航栏-------插槽-⼦组件-⽗组件⼀、先上结果图：
当屏幕缩⼩时的界⾯：
⼆、⾸先我们先创建⼀些⽤到的组件，如图
⼆、顶部组件的相关操作()
1、NavBar.vue上代码：
⾥⾯ul>标签放置⼀个插槽，⽤来放置多个li>标签。为什么要放插槽呢？？因为在⼀些地⽅我们可能还会⽤到像这样模板，只是那时的li>标签内容不⼀样了。所以插槽就很好解决了，下次使⽤只需要改li>标签的内容即可
<template>
<nav>
<div class="logo">
<slot name="logo-icon"><img src="../../assets/logo.jpg"></slot> <slot name="logo-title">巧克⼒电影</slot>
</div>
<div class="search">
<el-input
placeholder="请输⼊内容"
size="medium"
class="input_search">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<ul class="nav-menu">
<slot></slot>
</ul>
<div class="burger" @click="handleBurger()">
<div class="top-line"></div>
<div class="middle-line"></div>
<div class="bottom-line"></div>
</div>
</nav>
</template>
<script>
export default {
name: "NavBar",
methods:{
handleBurger(){
const burger=document.querySelector(".burger");
const navMenu=document.querySelector(".nav-menu");                burger.addEventListener("click",function(){
le("active");
le("open");
})
}js导航栏下拉菜单
}
}
</script>
2、NavBar.vue样式
响应式页⾯布局
@media screen and (max-width: 768px){
}
当⽹页屏幕⼩于max-width，样式发⽣的变化
<style scoped>
nav{
top:0;
left:0;
right:0;
display:flex;
justify-content:space-between;
align-items:center;
padding:05vw;
height:70px;
background-color:rgba(65,81,101,0.9);
}
.logo{
font-size:28px;
font-weight:600;
font-weight:600;
background-image:linear-gradient(to top,#9890e30%,#b1f4cf100%); -webkit-background-clip:text;
-webkit-text-fill-color:transparent;
flex:1;
}
.logo img{
width:30px;
height:30px;
border-radius:5px;
flex:1;
vertical-align:center;
}
.nav-menu{
flex:1;
display:flex;
justify-content:space-around;
max-width:500px;
}
.burger{
margin-left:10px;
display:none;
}
.
burger div{
width:30px;
height:2px;
background-color:#dadbdd;
margin:6px;
}
@media screen and(max-width:768px){
.nav-menu{
position:absolute;
top:70px;
right:0;
bottom:0;
width:40vw;
height:540px;
background-color:rgba(65,81,101,0.7);
flex-direction:column;
align-items:center;
justify-content:flex-start;
transform:translateX(100%);
transition:0.3s ease-in-out;
}
.nav-menu.open{
transform:translateX(0);
}
.burger{
display:block;
}
.burger.active div{
transition:0.3s ease-in-out0.2s;
}
.p-line{
transform:rotate(90deg)translateX(8px)translateY(-14px);
}
.
burger.active.bottom-line{
transform:rotate(90deg)translateX(-8px)translateY(-6px);
}
.burger.active.middle-line{
transform:rotate(90deg)translateY(2px);
}
@keyframes slideIn{
@keyframes slideIn{
from{
transform:translateX(20px);
opacity:0;
}
to{
transform:translateX(0);
opacity:1;
}
}
}
</style>
TabBarItem.vue页⾯代码，⽤来设置li>标签⾥⾯放置的内容
<slot name="li-icon"></slot>//给slot设置name，以便别的组件使⽤指定的插槽，，也可以设置默认值
<template>
<!--⼦组件通过props获取⽗组件传来的值-->
<div @click="itemClick">
<li>
<slot name="li-icon"></slot>//给slot设置name，以便别的组件使⽤指定的插槽，，也可以设置默认值<slot name="li-title"></slot>
</li>
</div>
</template>
<script>
export default{
name:"TabBarItem",
data(){
return{
}
},
props:{
path:String
},
methods:{
itemClick(){
console.log("toPath")
console.log(this.path)
this.$place(this.path)
},
}
}
</script>
<style scoped>
li{
list-style: none;
color: #dadbdd;
font-weight:600;
}
li:hover{
cursor: pointer;
}
@media screen and (max-width:768px){
li{
margin:3vh;
transform:translateX(20px);
transition:1s slideIn ease-in;
}
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。