本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
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）
转载：https://blog.csdn.net/gschen_cn/article/details/111503329
查看评论