(vue)搭建一个简单的vue插件

实现效果

点击下方导航栏切换不同的页面
其中下方的标题、图标以及个数都是自由定义的

实现思路

组件拆分

文件结构

建立底部TabBar组件

一般这种底部导航栏组件设置的heigth为49px。TabBar中包含了相同结构的TabBarItem组件，使用一个插槽就可以涵盖了；使用如下：

<TabBar>
	<TabBarItem><TabBarItem/>
	<TabBarItem><TabBarItem/>
	<TabBarItem><TabBarItem/>
	<TabBarItem><TabBarItem/>
</TabBar>

建立单项TabBarItem组件

TabBarItem中包含了一个两个img（活跃时一个，不活跃时一个）以及一个文本，因此引入三个插槽

建立路由

当点击图标时触发跳转事件，因此在TabBarItem中定义item_click方法，并且需要父组件传递页面信息的值，使用props。

  props:{
      path:String
  }

判断当前哪个路由处于活跃状态

  computed:{
      isActive(){
      	//判别哪个页面是活跃的
          return this.$route.path.indexOf(this.path)!=-1
      }
  },

源码

TabBar.vue源码：

<template>
  <div id="app">
    <div id="tab_bar">
        <slot></slot>
    </div>
  </div>
</template>

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

<style>

#tab_bar{
  display: flex;
  height: 49px;
  background-color: #efefef;
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  box-shadow: 0 -3px #d5d3d3;
  /* box-shadow: 0 -3px -3px beige; */
}
</style>

TabBarItem.vue源码：

<template>
    <div class="tab_bar_item" @click="item_click()">
        <div v-if="isActive">
            <slot name="item-icon-act"></slot>
        </div>
        <div v-else>
            <slot name="item-icon"></slot>
        </div>
        <div :class="{active:isActive}" >
            <slot name="item-title"></slot>
        </div>
    </div>
</template>

<script>
export default {
  name: 'TabBarItem',
  props:{
      path:String
  },
  data(){
      return{
        //   isActive:false
      }
  },
  computed:{
      isActive(){
      	//判别哪个页面是活跃的
          return this.$route.path.indexOf(this.path)!=-1
      }
  },
  methods:{
      item_click(){
        //   console.log(this.path)
          this.$router.replace(this.path)
      }
  }
}
</script>

<style>


.tab_bar_item{
  flex:1;
  text-align: center;
}
.tab_bar_item img{
    
}
.tab_bar_item div{
    font-size: 10px;
}
.active{
    color: #d4237a;
}
</style>

App.vue使用源码如下：

<template>
  <div id="app">
    <router-view/>
    <TabBar>
      <TabBarItem path="/home">
        <img src="./assets/img/tabbar/home.png" slot="item-icon" >
        <img src="./assets/img/tabbar/home_act.png" slot="item-icon-act">
        <div slot="item-title">主页</div>
      </TabBarItem>
      <TabBarItem path="/user">
        <img src="./assets/img/tabbar/user.png" slot="item-icon">
        <img src="./assets/img/tabbar/user_act.png" slot="item-icon-act">
        <div slot="item-title">用户</div>
      </TabBarItem>
      <TabBarItem path="/shop">
        <img src="./assets/img/tabbar/shop.png" slot="item-icon">
        <img src="./assets/img/tabbar/shop_act.png" slot="item-icon-act">
        <div slot="item-title">商店</div>
      </TabBarItem>
      <TabBarItem path="/like">
        <img src="./assets/img/tabbar/like.png" slot="item-icon">
        <img src="./assets/img/tabbar/like_act.png" slot="item-icon-act">
        <div slot="item-title">喜欢</div>
      </TabBarItem>
    </TabBar>
  </div>
</template>

<script>
import TabBar from './components/tabbar/TabBar'
import TabBarItem from './components/tabbar/TabBarItem'
export default {
  name: 'App',
  components:{
    TabBar,
    TabBarItem
  }
}
</script>

<style>
</style>