vue自定义底部导航栏Tabbar

使用vue封装一个如下图所示的组件

主要的项目结构如下:

在component/tabbar中新建组件TabBar.vue,内容如下:

<template>
  <div class="tab-bar">
    <slot></slot>
  </div>
</template>

<script>
import TabBarItem from './TabBarItem'
  export default {
    name: "TabBar",
  };
</script>

<style>
.tab-bar {
  display: flex;
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  height: 49px;
  box-shadow: 0px -2px 1px rgba(204,204,204,0.5);
}

</style>

在component/tabbar中新建组件TabBarItem.vue,内容如下:

<template>
  <div class="tab-bar-item" @click="clickItem">
    <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-content"></slot></div>
   
  </div>
</template>

<script>
  export default {
    name : 'TabBarItem',
    props : {
      path : String,
      //颜色可以自定义,传的值必须是一个字符串
      activeColor: {
        type: String,
        // default: 'red'
      }
    },
    data() {
      return {
        // isActive : true,
      }
    },
    methods : {
      clickItem() {
        this.$router.push(this.path)
      }
    },
    computed : {
      //当isACtive为ture的时候,字体颜色发生改变
      isActive() {
        return this.$route.path.indexOf(this.path) !== -1
      },
      activeStyle() {
        return this.isActive ? {color: this.activeColor} : {}
      }
    }
  };
</script>

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

在component/mainTabBar中新建组件mainTabBar.vue,内容如下:

<template>
  <tab-bar>
    <tab-bar-item path="/home" activeColor="#FF5977">
      <img slot="item-icon" src="../../assets/img/home.svg" alt />
      <img slot="item-icon-active" src="../../assets/img//home_active.svg" alt />
      <div slot="item-content">首页</div>
    </tab-bar-item>
    <tab-bar-item path="/category" activeColor="#FF5977">
      <img slot="item-icon" src="../../assets/img/category.svg" alt />
      <img slot="item-icon-active" src="../../assets/img/category_active.svg" alt />
      <div slot="item-content">分类</div>
    </tab-bar-item>
    <tab-bar-item path="/shopCart" activeColor="#FF5977">
      <img slot="item-icon" src="../../assets/img/shopcart.svg" alt />
      <img slot="item-icon-active" src="../../assets/img/shopcart_active.svg" alt />
      <div slot="item-content">购物车</div>
    </tab-bar-item>
    <tab-bar-item path="/profile" activeColor="#FF5977">
      <img slot="item-icon" src="../../assets/img/profile.svg" alt />
      <img slot="item-icon-active" src="../../assets/img/profile_active.svg" alt />
      <div slot="item-content">我的</div>
    </tab-bar-item>
  </tab-bar>
</template>

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

export default {
  name: "App",
  components: {
    TabBar,
    TabBarItem,
  },
};
</script>

<style>
</style>

router文件夹index.js中配置路由相关信息

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


//导入需要懒加载的路由
const Home = () => import('../views/Home/Home.vue');
const Category = () => import('../views/Category/Category')
const shopCart = () => import('../views/Cart/Cart.vue');
const Profile = () => import('../views/Profile/Profile.vue');


//挂载
Vue.use(VueRouter);

const routes = [
  {
    path : '',
    redirect: '/home'
  },
  {
    path :'/home',
    component : Home,
  },
  {
    path: '/category',
    component: Category
  },
  {
    path :'/shopCart',
    component : shopCart
  },
  {
    path : '/profile',
    component : Profile
  }
];
const router = new VueRouter({
  routes,
  mode : 'history'
})

export default router;

在view中配置要显示的内容:内容都是相似的,此处只列举一个

<template>
  <h2 class="title">首页</h2>
</template>

<script>
export default {

}
</script>

<style>
  .title {
    color : orange;
  }
</style>

main.js中的内容:

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

app.vue中的内容:

<template>
  <div id="app">
    <router-view></router-view>
    <main-tab-bar></main-tab-bar>
  </div>
</template>

<script>
  import MainTabBar from './components/mainTabBar/mainTabBar'

export default {
  name: "App",
  components: {
   MainTabBar
  },
};
</script>

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

assets/css中base.js中的代码如下:

body {
  margin : 0;
  padding : 0;
}