《和小米一起学Vue.js》— 封装组件 Tabbar

项目中很多时候都需要封装组件来达到复用，其中最常用的封装就是封装tabbar，因为几乎所有的项目都会使用到。

使用 vue ui 新建一个项目 tabbar，在 assets 目录下新建一个 css 和 img 文件夹，分别用来存放项目中的公用css和图片资源。

在 components 目录下，新建一个 tabbar 目录，用来存放 tabbar 组件。（一般公用的组件都单独存放在 components 目录下）

在 components/tabbar 目录下新建 TabBar.vue 和 TabBarItem.vue 文件，分别来创建 tabbar 组件和他的子项 tabbaritem 组件。

//TabBarItem.vue

<template>
  <!-- 这里给每个选项绑定clickBtn事件 -->
  <div class="tabbaritem" @click="clickBtn">
    <div class="tabbaritemImg">
      <!-- 这里使用插槽来达到动态替换的效果 -->
      <slot v-if="isactive" name="itemiconactive"></slot>
      <slot v-else name="itemicon"></slot>
    </div>
    <!-- 这里使用动态绑定class -->
    <div class="itemname" :class="{itemnameactive:isactive}">
      <slot name="itemname"></slot>
    </div>
  </div>
</template>

<script>
  export default{
    name:"TabBarItem",
    props:{
      //接收参数path(格式为Sting)
      path:String
    },
    computed:{
      isactive(){
        //仅当前路由的path中含有参数path,返回true,表示当前选中.
        return this.$route.path.indexOf(this.path) !== -1?true:false;
      }
    },
    methods:{
      //点击每一个选项的时候,使用路由跳转地址.
      clickBtn(){
        this.$router.push(this.path);
      }
    }
  }
</script>

<style scoped>
.tabbaritem{flex:auto;text-align:center;}
.tabbaritemImg img{width:20px;height:20px;}
.itemname{font-size:14px;}
.itemnameactive{color:blueviolet;}
</style>

//TabBar.vue

<template>
  <div class="tab-bar">
    <!-- 这里使用插槽来达到动态替换的效果 -->
    <slot></slot>
  </div>
</template>

<script>
export default {
  name:'TabBar'
}
</script>
<style>
.tab-bar{height:49px;width:100%;background:#efefef;position:fixed;bottom:0;display:flex;box-shadow:0px -2px 2px #ddd;}
</style>

然后修改 App.vue 文件来引用两个组件

//App.vue

<template>
  <div id="app">
    <router-view></router-view>
    <tab-bar>
      <tab-bar-item path="/main">
        <img slot="itemicon" src="./assets/img/news.png" alt="">
        <img slot="itemiconactive" src="./assets/img/newsactive.png" alt="">
        <div slot="itemname">主页</div>
      </tab-bar-item>
      <tab-bar-item path="/me">
        <img slot="itemicon" src="./assets/img/me.png" alt="">
        <img slot="itemiconactive" src="./assets/img/meactive.png" alt="">
        <div slot="itemname">我的</div>
      </tab-bar-item>
    </tab-bar>
  </div>
</template>

<script>
import TabBar from "./components/tabbar/TabBar"
import TabBarItem from "./components/tabbar/TabBarItem"

export default {
  name:'app',
  components:{
   //调用的时候可以采用驼峰命名,但在使用的时候,由于html对大小写不明感,需要使用短横方式调用"tab-bar"
   TabBar,
   TabBarItem
  }
}
</script>
<style>
  @import "./assets/css/global.css";
</style>

在 views 目录下，新建 main 和 me 目录，分别用来保存主页和我的页面的文件，并分别新建 mainView.vue 和 meView.vue 文件。

//mainView.vue

<template>
  <div>
    <h1>这里是主页</h1>
  </div>
</template>

//meView.vue

<template>
  <div>
    <h1>这里是我的</h1>
  </div>
</template>

最后配置路由 index.js 文件

//index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

//懒加载
const MainView=()=>import('../views/main/mainView')
const MeView=()=>import('../views/me/meView')

const routes = [
  {
    path:'',
    redirect:'/main'
  },
  {
    path:'/main',
    component:MainView
  },
  {
    path:'/me',
    component:MeView
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

代码下载

下载地址：  密码：q6ys