一、先上结果图:
当屏幕缩小时的界面:
二、首先我们先创建一些用到的组件,如图
二、顶部组件的相关操作(了解插槽)
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(){
burger.classList.toggle("active");
navMenu.classList.toggle("open");
})
}
}
}
</script>
2、NavBar.vue样式
响应式页面布局
@media screen and (max-width: 768px){
}
当网页屏幕小于max-width,样式发生的变化