学习笔记--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.效果展示

初始首页:

切换:

 

posted @   小超和你  阅读(314)  评论(0编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示