vue系列教程之微商城项目|导航栏组件封装

1） 在components文件下新建navBar文件夹和 navBar.vue文件

在该文件中先简单的写个导航栏占位

navBar.vue

2） 在App.vue 文件中引入，并查看页面显示效果

App.vue

页面显示效果

3）简单封装

对于导航栏中的信息（无论图片或者文字），通过props传入到navBar中，配合flex布局，需要传入几 个按钮，navBar自动调整布局

navBar.vue

App.vue

效果图

4）下载导航栏内部按钮图标

首先下载适合的图标，放置到assets中,分别下载点击前的、点击后的图标

下载地址：https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.5&type=1

5）导航栏内部按钮封装

1)navBar文件夹下新建navBarItem.vue文件

navBarItem.vue

组件参数说明：url:默认展示的图标 , activeurl:被点击后展示的图标 , text:文本内容 , path:该模块对 应的页面路由

2)在navBar.vue中引入navBarItem，并进行值绑定

navBar.vue

3）在App.vue中传入navBar组件所需的值

App.vue

4）效果图

本篇文章是该系列文章中的第四篇，讲述的是导航栏组件封装的相关操作步骤。下篇系列文章之导航栏与页面绑定正在制作之中，各位粉丝敬请期待。

实习编辑：隆阳

稿件来源：深度学习与文旅应用实验室（DLETA）