tabbar与item

image.png

item.vue

<template>
    <div class="itemWrap" @click="fn()">
         <span v-show="bol"><slot name='icon-gray'></slot></span>
         <span v-show="!bol"><slot name='icon-color'></slot></span>
         <span :class="{active:!bol}">{{txt}}</span>
    </div>
</template>

<script>
    export default{
        props:['txt','mark','sel'],
        computed:{                  //计算属性，定义需要通过简单逻辑判断后，才能最终确定值的变量 
            bol:function(){
                if(this.mark==this.sel){
                    return false;
                }else{
                    return true;
                }
                
            }
        },
        methods:{
            fn:function(){
                //点击时，将mark值传递给父级
                this.$emit('change',this.mark);
            }
        }
    }
    //给每个item添加一个mark,作为唯一标识
    //声明给每个变量selected来记录被选中的item的mark
</script>

<style>
    .itemWrap{
        width: 20%;
        height: 64px;
        float: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .itemWrap>span>img{
        width: 22px;
    }
    .itemWrap>span{
        font-size: 14px;
        padding-top: 5px;
        color: #555;
    }
    .itemWrap>span.active{
        color: #29c320c7;
    }
</style>

HelloWorld.vue ( tabbar组件 )

<template>
     <div class="tabbarWrap">
       <Item txt='首页' mark='1' :sel='selected' @change='getMark'>
        <img src="../assets/home.png" slot='icon-gray'/>
        <img src="../assets/home1.png" slot='icon-color'/>
       </Item>
       <Item txt='广播' mark='2' :sel='selected' @change='getMark'>
        <img src="../assets/bro.png" slot='icon-gray'/>
        <img src="../assets/bro1.png" slot='icon-color'/>
       </Item>
       <Item txt='小组' mark='3' :sel='selected' @change='getMark'>
        <img src="../assets/teamm.png" slot='icon-gray'/>
        <img src="../assets/teamm1.png" slot='icon-color'/>
       </Item>
       <Item txt='书影音' mark='4' :sel='selected' @change='getMark'>
        <img src="../assets/video.png" slot='icon-gray'/>
        <img src="../assets/video1.png" slot='icon-color'/>
       </Item>
       <Item txt='设置' mark='5' :sel='selected' @change='getMark'>
        <img src="../assets/setting.png" slot='icon-gray'/>
        <img src="../assets/setting1.png" slot='icon-color'/>
       </Item>
     </div>
</template>

<script>
import Item from './item'
    export default {
          components:{
            Item
          },
          data:function(){
            return{
              selected:1  
            }
          },
          methods:{
             getMark:function(val){  //getMark()接受子组件传来的值val并赋给selected
                this.selected=val;
             }
          }
    }
</script>

<style>
  .tabbarWrap{
    width: 100%;
    height: 64px;
    position: fixed;
    left: 0;
    bottom: 0;
    border-top: 1px solid #999;
  }
</style>