前言
1.这里面包含了大量的、我的个人理解与看法;
2.这是一个购物商城项目,目前阶段牵扯到路由, 插槽, axios数据请求, 数据存储与使用;
3.这篇只牵扯路由配置, 组件插槽;
4.现在这个项目已经完成了一小部分,不过我还是打算把前面写的文件都记录一遍;
一、Cli4生成项目
略略略;
使用Vue-cli4.5x快速搭建项目
头铁,全用最新版了;
| 插件 | 版本 |
|–|–|
| Vue | ^3.0.0 |
| vue-router | ^4.0.0-0 |
| axios | ^0.21.1 |
| css-loader | ^3.6.0 |
| style-loader | ^1.1.3 |
文章阶段性同步, 插件部分目前就用到了这些;
二、路由配置
我想了一下,还是决定返回来先把路由写上,因为TabBarItem需要用到路由来判断高亮显示与否;
1 | //这是在index.js里; |
三、tabBar制作
我想你可能见过那种固定定位,不会随着页面滚动的底部横条?
这部分共包括三个组件;
TabBar
TabBarItem
MainTabBar
TabBar和TabBarItem有插槽关系,TabBar有一个插槽, 在MainTabBar处可以传入所有的(4个)TabBarItem;
每个TabBarItem有三个插槽,在MainTabBar处可以传入各个TabBarItem的内容;
我们先看TabBar和TabBarItem, 封装完这两个我们才能封装MainTabBar;
1.TabBar组件
TabBar只有一个插槽和一些样式,这个插槽需要被传入四个TabBarItem(四个底部栏选项);
1 | //这是在src/components/common/tabbar/TabBar.vue里; |
2.TabBarItem组件
考虑到我难以把说明对应到代码位置,下面的说明基本都写在代码注释里,如果你想要看某段代码的说明,请在这段代码下方寻找;
template标签用来写组件模板,在Cli4里,根元素不再只能有唯一一个,你可以在里面写多个根元素(不过下面这个还是只写了一个tab-bar-item);
1 | //这是在src/components/common/tabbar/TabBarItem.vue里; |
我们现在来完成TabBarItem图标点击高亮的功能,虽然图标还没传入,看不到效果;
3.TabBarItem图标活跃高亮
思路是根据该TabBarItem对应的页面的路由是否活跃, 来控制变量isActive的布尔值, v-if和v-else根据isActive的布尔值, 决定是否采用新的文字样式和高亮图标(罢说了, 我拉上去补路由表了);
1 | //这还是在src/components/common/tabbar/TabBarItem.vue里; |
四、MainTabBar组件
不打算在项目里引入TabBar和TabBarItem就封装的彻底一点吧,到时候只引入MainTabBar就好了;
1 | //这是在src/components/content/mainTabBar/MainTabBar.vue里; |
五、Icon路径
总结
艰难的考试周ing…
昨天收到”好消息”,我要留校培训到30号(痛苦面具) X目