tabbar组件

1.tabbar组件，让其固定在底部，带一个插槽，之后插入tabbar-item组件

<template>

    <div id="tabbar">

       <slot></slot>

    </div>

</template>

<script>

export default {

    name:'TabBar'

}

</script>

<style scoped>

#tabbar{

    display: flex;

    position: absolute;

    text-align: center;

    left: 0;

    right: 0;

    bottom: 0;

    box-shadow: -2px 0px 5px #ddd;

}

</style>

 

2.tabbar-item组件，计算属性中Activet方法中判断当前活跃路由是否包含父组件传入的路径，若包含返回true，切换div->img显示，div->text获得class：active，字体变换颜色，实现选中效果

<template>

    <div id="tabbar-item" @click="itemClick">

        <div v-if="!Activet"><slot name="img"></slot></div>

        <div v-else><slot name="img-active"></slot></div>

        <div :class="{activet:Activet}"><slot name="text"></slot></div>

    </div>

</template>

<script>

export default {

    name:'tabbaritem',

    props:{

        path:String

    },

    methods:{

        itemClick(){

            this.$router.push(this.path).catch(err=>{})

        }

    },

    computed:{

        Activet(){

            return this.$route.path.indexOf(this.path) !== -1

        }

    }

}

</script>

 

3.注册使用组件，给子组件peops传值

<template>

  <div id="app">

    <router-view></router-view>

    <tab-bar>

      <tab-bar-item path="/home">

        <img slot="img" src="./assets/img/shouye1.svg"/>

        <img slot="img-active" src="./assets/img/shouye.svg"/>

        <p slot="text">首页</p>

      </tab-bar-item>

       <tab-bar-item path="/category">

        <img slot="img" src="./assets/img/fenlei1.svg"/>

        <img slot="img-active" src="./assets/img/fenlei.svg"/>

        <p slot="text">分类</p>

      </tab-bar-item>

      <tab-bar-item path="/cart">

        <img slot="img" src="./assets/img/gouwuche1.svg"/>

        <img slot="img-active" src="./assets/img/gouwuche.svg"/>

        <p slot="text">购物车</p>

      </tab-bar-item>

      

      <tab-bar-item path="/profile">

        <img slot="img" src="./assets/img/shezhi1.svg"/>

        <img slot="img-active" src="./assets/img/shezhi.svg"/>

        <p slot="text">设置</p>

      </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:{

    TabBar,

    TabBarItem

  }

}

</script>