P7-Vue-supermall项目-首页导航栏的封装
1.概述
在本篇文章中介绍如何封装导航栏，并且设置首页导航栏。
2.封装NavBar
将项目所有模块导航栏抽离，在公共层封装一个导航栏NavBar，在其他页面的导航栏都可以使用这个公共的NavBar，然后根据自己的需求进行调整。
2.1.封装NavBar
在公共层components下common下新建navbar文件夹，在其下创建NavBar.vue组件，封装导航栏。
- NavBar.vue组件封装导航栏内容
<template>
<div class="nav-bar">
<!-- 封装三个插槽，在每个页面导航中将插槽内容替换为展示的内容即可 -->
<div class="left"><slot name="left"></slot></div>
<div class="center"><slot name="center"></slot></div>
<div class="right"><slot name="right"></slot></div>
</div>
</template>
<script>
export default {
name: 'NavBar'
}
</script>
<style scoped>
/* 设置NavBar导航的公共样式 */
.nav-bar {
display: flex;
height: 44px;
line-height: 44px;
text-align: center;
box-shadow: 0 1px 1px rgba(100, 100, 100, .1);
}
.left, .right {
width: 60px;
}
.center {
flex: 1;
}
</style>>
3.首页设置导航NavBar
3.1.首页应用NavBar
在首页中使用封装的NavBar组件，并将中间插槽替换为购物街内容。
<template>
<div id="home">
<!-- 3.NavBar组件替换中间的插槽 -->
<nav-bar><div slot="center">购物街</div></nav-bar>
</div>
</template>
<script>
// 1.导入Navbar组件
import NavBar from 'components/common/navbar/NavBar';
export default {
name: "Home",
components: {
// 2.注册NavBar组件
NavBar
}
}
</script>
<style scoped>
</style>
3.2.首页NavBar样式展示
# 进入项目根目录
cd \supermall
# 安装路由组件
npm run serve
3.3.设置首页NavBar样式
首页使用NavBar导航已经显示出来了，下面就根据首页导航的样式对他进行美化。
-
1.设置首页NavBar背景颜色
-
首页背景颜色值引用的是在base.css文件中设置的全局变量。
-
2.设置首页导航文字颜色