|
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./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） |
|
|
