购物街项目TabBar的封装

1.TabBar介绍

在购物街项目中 不论页面如何滚动 始终存在一个TabBar固定在该项目的底部 他在该项目中 扮演者选项卡栏的角色 内部存在若干选项 而选项中 固定存在两部分(图片+文本) 其中主要涉及到TabBar/TabBarItem这些和业务无关的共享组件(建议存放于components/common中)、MainTabBar这种和业务挂钩的共享组件(建议存放于components/content中)以及路由组件这种独立组件(建议存放于views中) 一些图片或者css资源则存放于assets中

2.TabBar组件的实现

1.js部分

在项目中 TabBar组件会因为内部活跃组件的不同而呈现不同的页面 因此 我们需要在该组件内部设计插槽 用于应对动态变化的内容

2.样式部分

①固定在底部的样式：需要通过固定定位+指定位置即可实现
②高度：一般选项卡栏的高度都默认为49px
③选项平分效果：需要设置展示方式为flex+插槽内部子元素flex:1(为插槽内部子元素设置样式 vue3的用法不同于vue2 他需要通过伪类选择器::v-slotted(xx)方可设置)
④阴影效果：通过box-shadow实现 其中每个取值从左到右依次为水平便宜方向、垂直偏移方向、模糊半径、偏移距离以及阴影颜色

3.TabBarItem组件的实现

1.js部分

在选项卡栏中 由于每一个选项都是各不相同的 所以说需要通过插槽来动态决定选项的内容
选项中 我们可以固定的分为两部分(图片+文本) 但是每一部分都是动态变化的 所以针对每一部分都需要设置插槽进行占位 到时候替换时 按照具名插槽的名称进行替换(在vue3中 插槽替换同样不同于vue2 他需要在替换内容的外部包裹template元素 并通过v-slot:xx指明具名插槽名称)

图片/文本都存在活跃/非活跃样式 其中 文本直接通过样式设置来切换活跃状态 但是图片不行 图片需要通过覆盖的方式来达到活跃状态的切换 因此我们还需要为选项卡栏再增加一部分内容 即活跃状态下的图片插槽 只不过 活跃状态下的图片插槽和非活跃状态下的图片插槽是互斥的关系(通过v-if实现)

至于v-if的判断条件 则需要通过isActive动态决定(他的值需要通过一段逻辑动态决定) 所以适合使用computed储存(data适用于储存静态值 而methods适合储存动态但没缓存的数据 而computed则适合储存动态但有缓存的数据)

isActive的逻辑具体是这样的：我们可以通过this.$route.path获取当前处于活跃状态的组件的url 然后我们的TabBarItem内部需要通过父传子的方式(props)获取父组件传递而来的link(即每一个组件都绑定着一个自身的url) 我们就可以通过this.$route.path和link进行一一匹配 知道匹配成功 就可知谁为活跃组件

isActive不仅仅应用于图片的活跃与否 还会应用于文本的应用与否 在文本中 我们会通过isActive来动态决定活跃样式是否作用 但是 为了体现良好的封装性(即用户只需要关心颜色样式的设置 而不需要关心颜色样式设置的过程) 我们的颜色应该交由外界动态决定 而非固定死在TabBarItem中 如此一来 我们就需要再次通过父传子(props)的方式设置颜色 但是 如果颜色样式内置于样式表中 就无法访问组件内部的js部分 因此 我们在设置样式时 需要通过内联样式(元素位置处)进行设置 内联样式中 颜色样式的设置同样需要通过逻辑来动态决定 所以我们为其在computed设置activeStyle来处理颜色

2.样式部分

①文本大小及文本/图片的水平居中效果(text-align水平居中可以为元素内部的文本以及图片生效)
②图片过于靠上问题解决：父子元素之间设置边距建议使用内边距处理 上内边距设置稍大 而下内边距设置稍小
③TabBarItem插槽内部图片子元素大小及垂直居中效果

4.TabBar/TabBarItem挂载到App组件

当我们的TabBar和TabBarItem封装完毕以后 我们就会在App组件中导入并使用 但是一股脑的存放于App组件中 内容未免过于庞大 因此的话 针对内容过多的情况 我们依然可以进行封装操作 我们将其封装为MainTabBar(注意导入操作也要一并移动到MainTabBar组件中)

在MainTabBar中 我们需要完成插槽的替换、子属性的设置以及路由跳转功能

在以前的vue2项目中 我们是通过绑定点击事件、触发路由的push/replace操作完成路由跳转需求的 但是现在的vue3项目中 我则是换一种方案实现路由跳转 即通过router-link包裹路由跳转的载体(TabBarItem) 并通过to设置跳转url

5.路由配置

1.vue-router的安装

如果你刚开始创建项目时 有勾选路由选项 那么就不需要执行这一步
我们可以通过npm install --save vue-router@4来下载vue-router(vue3对应的vue-router版本为4)

2.创建并配置router/index.js

如果你在项目创建伊始有勾选路由选项 那么这一步也不需要执行
我们手动创建router/index.js文件 由于我们的vue版本号为3 不同于vue2那样创建router对象
我们首先需要从vue-router中导入createRouter(用于创建router对象)以及createWebHistory(用于设置网页的前进后退)
接着以懒加载的方式导入路由组件(在应用时才从服务器加载 这样就避免了第一次加载时需要一次性加载很多内容 由于体积过大导致用户响应速度慢、浪费流量等等弊端)
然后我们创建routes 提前为我们的router对象设置参数(对象中变量参数的增强写法) 其中 我们需要配置的是若干对路由组件和url的映射关系
接着通过createRouter创建router对象 其中传入刚才设置好的routes以及通过createWebHistory去初始化history属性
最后导出router对象 并挂载到Vue实例中