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)

(0)

相关推荐