学习笔记--Vue中tabbar组件封装的理解
大部分项目都需要一个菜单栏进行切换,所以学习了一下怎样封装一个tabbar组件,这样以后使用的时候可以直接拿来使用。
1.路由router
首先是路由的设置,这个在之前的随笔中已经写过相关的使用方法。
说一下使用tabbar,在标签栏下面点击切换页面的时候,跟随到不同的路径,就需要配置相关的router,根据不同的路径展示不同的页面。
入口App中的div:
<div id="app"> <router-view></router-view> <MainTabBar></MainTabBar> </div>
MainTabBar是已经封装好的主标签栏的组件。
router-view是router切换、显示页面的位置。
这里说明页面显示在菜单栏的上方,如果想要页面显示在其他位置,和其他组件切换顺序即可。
这里简单复习一下router的配置方法:
1.导入相关插件,一般要导入Vue和VueRouter,还有跳转的页面。
这里的页面全部使用懒加载,加快解析效率。
import Vue from "vue"; import VueRouter from "vue-router";
const Home =() =>import('../views/home/Home')
const Category =() =>import('../views/category/Category')
const Cart =() =>import('../views/cart/Cart')
const Profile =() =>import('../views/profile/Profile')
2.安装插件,只有安装了插件之后才能在vue中使用。
Vue.use(VueRouter)
3.创建路由对象:路由主体。
const router = new VueRouter({ routes = [] //默认为hash模式,url中会有#出现不太美观 //可以在router中改为history模式 mode:'history' })
这里的routes是一个数组,但如果项目大的话,routes跳转会非常的多,所以我们一般将其抽离,单独的写在上面,或者抽离成一个新的js文件,层次会更加清楚一点。
这里的注释说明:如果不设置mode,默认为hash模式,url中会有#出现不太美观。
例如:跳转到/home,我们希望的是localhost:8080/home,但是会显示成localhost:8080/#/home,有点难看。
贴一下routes数组:
const routes=[ { path:'', redirect:'/home' }, { path:'/home', component:Home, }, { path:'/category', component:Category }, { path:'/cart', component:Cart }, { path:'/profile', component:Profile } ]
2.组件的结构
MainTabBar是最大封装出的一个组件。
也是项目一个独特的组件,用自定义的TabBar和里面任意数量的TabBarItem组成。
TabBar和TabBarItem仅仅是一个通用的可以直接拿来使用的组件。
换句话说,放在任意一个项目,只要对MainTabBar进行diy就行,其余的可以直接复制粘贴。
不多逼逼,直接通过组件代码分析。
2.1TabBarItem
<div class="tab-bar-item" @click="itemClick"> <div v-if="!isActive"><slot name="item-icon"></slot></div> <div v-else ><slot name="item-icon-active"></slot></div> <div :style="activeStyle"><slot name="item-text"></slot></div> </div>
首先看最外层的div,class是设置的样式,绑定了一个点击事件,很简单理解,我们希望点击每一个菜单的时候,都可以跳转到响应的页面。
先看点击事件:
itemClick(){ this.$router.replace(this.path) }
这里用$router获取到所有的路由,replace代表不可返回的页面跳转,this.path设计成了props属性。
简单来说,就是我们使用TabBarItem这个组件的时候,我们希望给他的path传一个url,让他可以跳转到我们指定的url中。
里面嵌套了2个具名插条,一个存放的是菜单图标,一个存放的是菜单名称。
我们希望点击的时候菜单图标有个变化进行反馈,同时菜单文字颜色发生变化。
对于菜单图标变化,通过v-if/v-else后的布尔值isActive来控制。
isActive(){ //indexof函数 当正处于活跃状态下的path路径和模板传入的path相同时,返回的不是-1 //其余的传回-1 return this.$route.path.indexOf(this.path) !== -1 }
对于菜单文字颜色变化,同上。
activeStyle(){ return this.isActive ? {color:this.activeColor}:{} }
这里的color,设计成了this.activeColor,同样也是设计成了props属性,这样我们也希望使用这个组件的时候可以传进来一个颜色,来规定选中的时候怎么变化。
当然了,如果不设置的话,就会使用默认值。
下面是TabBarItem可供传参的列表:
props:{ path:String, activeColor:{ type:String, default:'red' } },
可供传参的属性越多,说明组件的扩展性就越好,可以满足各个要求。
注意:在具名插条的外面,最好使用div进行一层包裹,不然在使用v-if、class或v-bind等属性的时候,极容易出错。
2.2TabBar
<div id="tab-bar"> <slot></slot> </div>
TabBar中就插入了一个默认的插条,这代表着可以任意数量的item,这样就大大灵活了菜单栏的规模,不再局限于定死的x个。
2.3MainTabBar
<template> <TabBar> <TabBarItem path="/home" active-color="green"> <img slot="item-icon" src="../../assets/img/tabbar/1.png" alt=""> <img slot="item-icon-active" src="../../assets/img/tabbar/2.png" alt=""> <div slot="item-text">首页</div> </TabBarItem> <TabBarItem path="/category" active-color="deepPink"> <img slot="item-icon" src="../../assets/img/tabbar/1.png" alt=""> <img slot="item-icon-active" src="../../assets/img/tabbar/2.png" alt=""> <div slot="item-text">分类</div> </TabBarItem> <TabBarItem path="/cart"> <img slot="item-icon" src="../../assets/img/tabbar/1.png" alt=""> <img slot="item-icon-active" src="../../assets/img/tabbar/2.png" alt=""> <div slot="item-text">购物车</div> </TabBarItem> <TabBarItem path="/profile"> <img slot="item-icon" src="../../assets/img/tabbar/1.png" alt=""> <img slot="item-icon-active" src="../../assets/img/tabbar/2.png" alt=""> <div slot="item-text">我的</div> </TabBarItem> </TabBar> </template>
上文说过这里是业务项目的组件,所以就用上了刚才我们封装的item和bar。
首先最外层放的是一个TabBar,里面自定义放了4个item。
每一个item里面传入了path跳转网址,和active-color激活时字体颜色,都是刚刚设置好的props属性。
里面的具名插条,前两个是图片,最后一个是文字,也都进行了相关的设置。
条理非常的清晰。
3.效果展示
初始首页:
切换:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库