Vue-CLI + Vue3 + Vue-Router4 实现tabbar小案例

已进厂(。•́︿•̀。)

已于 2023-05-27 17:18:49 修改

阅读量996

点赞数 1

分类专栏： Vue全家桶系列文章标签： vue.js javascript 前端

于 2023-05-26 21:27:18 首次发布

本文链接：https://blog.csdn.net/twjtwjtwjm/article/details/130893970

版权

本案例详细介绍了如何使用Vue-CLI、Vue3和Vue-Router4创建一个tabbar导航，涉及组件封装、编程式路由和插槽的使用。通过实现点击导航栏切换上方内容区显示的组件，展示了组件化开发的基本流程。最终，通过路由配置和事件绑定，成功实现了tabbar导航的功能。

摘要由CSDN通过智能技术生成

Vue-CLI + Vue3 + Vue-Router4 实现tabbar小案例

tabbar导航栏案例：该案例实现了基础的组件封装，编程式路由，以及插槽的使用，对于我们日常组件化开发有着很大的启示作用，主要效果是点击下方的导航栏链接，上方内容区显示对应的组件内容，就如果我们常用的手机App一样。

效果图：

项目结构图：

svg图片资源下载：点击下载图片资源

1、使用Vue-CLI新建tabbar工程，删除不必要的vue组件，并且取消代码检查：lintOnSave:false
2、在assets文件夹下建立css和img文件夹，存放静态资源，将图片复制到img文件夹中的tabbar子文件夹中

3、在css文件夹中建立base.css文件：

body{
   
    padding: 0;
    margin: 0;
}
/*然后在App.vue组件的style中引入css/base文件：@import "assets/css/base.css"，此处不建议在main.js中引入*/

4、修改App.vue的内容：

<template>
  <div id="app">
    <div id="tab-bar">
      <div class="tab-bar-item">首页</div>
      <div class="tab-bar-item">分类</div>
      <div class="tab-bar-item">购物车</div>
      <div class="tab-bar-item">我的</div>
    </div>
  </div>
</template>

<script>
  export default {
    name:'App',
  }
</script>

<style>
@import "assets/css/base.css";
#tab-bar{
  display: flex; /* 弹性盒子布局 */
  background-color: #f1f1f1;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  box-shadow: 0 -2px 2px rgba(100,100,100,0.2);
}
.tab-bar-item{
  flex: 1; /* 对多项内容等分排列 */
  text-align: center;
  height: 49px;
  font-size: 14px;
}
</style>

5、将导航栏封装成TabBar和TarBarItem两个组件，步骤如下：

//1. 把id为tab-bar的层及相应的css代码等封装在一起，作为一个组件
//2. 在components文件夹中建立一个名为tabbar的子文件夹，单独存放tabbar组件相关的组件，不要把所有的组件都直接放在components文件夹下，便于管理。[项目越大，组件越多]
//3. 在tabbar文件夹中建立名为TabBar.vue文件，把App.vue文件中的内容复制到TabBar.vue中
//4. 在TabBar.vue中，有四项内容，由于每一项在后期显示时有图片和文字，所以把TabBar.vue中的每一项封装成一个组件：TabBarItem.vue，考虑到TabBar.vue中使用的TabBarItem子组件数量是不固定的，所以要用到插槽。
//代码如下：

TabBar.vue内容：

<template>
  <div id="tab-bar">
    <!-- 使用插槽，让App.vue根据需要，插入内容 -->
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "TabBar"
}
</script>

<style scoped>
#tab-bar{
  display: flex; /* 弹性盒子布局 */
  background-color: #f1f1f1;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  box-shadow: 0 -2px 2px rgba(100,100,100,0.2);
}
</style>

TabBarItem.vue内容：

<template>
  <div class="tab-bar-item">
    <img src="../../assets/img/tabbar/home.svg" alt="" />
    <div>首页</div>
  </div>
</template>

<script>
export default {
  name: "TabBarItem"
}
</script>

<style scoped>
.tab-bar-item {
  flex: 1; /* 对多项内容等分排列 */
  text-align: center;
  height: 49px;
  font-size: 14px;
}

.tab-bar-item img{
  width: 24px;
  height: 24px;
  margin-top: 3px;
  margin-bottom: 2px;
  vertical-align: middle;
}
</style>

App.vue内容：

<template>
  <div id="app">
    <tab-bar>
      <!-- 根据需要在插槽位置插入4个子组件TabBarItem[数量可变] -->
      <tab-bar-item></tab-bar-item>
      <tab-bar-item></tab-bar-item>
      <tab-bar-item></tab-bar-item>
      <tab-bar-item></tab-bar-item>
    </tab-bar>
  </div>
</template>

<script>
  //导入TabBar组件
  import TabBar from "./components/tabbar/TabBar";
  //导入TabBarItem组件
  import TabBarItem from "./components/tabbar/TabBarItem";
  export default {
    name:'App',
    components:{
      TabBarItem,
      TabBar
    }
  }
</script>

<style>
@import "assets/css/base.css";
</style>

6、测试运行…界面会出现四个子组件，但内容都一样，而我们要实现的是显示不同内容的4个组件，所以就可以在TabBarItem中也使用插槽(上方显示图片，下方显示文字)：

<template>
  <div class="tab-bar-item">
    <!--  如果使用多个插槽，要使用具名插槽  -->
    <slot name="item-icon"></slot>
    <slot name="item-text"></slot>
  </div>
</template>

7、修改App.vue，将TabBarItem中的插槽填满，把其中对于img的样式放到App.vue中：