vue-5-2 tabbar的完善

当整体tabbar完成，开始完善。此时，暂时与tabBar组件无关，只调整App.vue和tabBarItem组件

1. 点击某个tabBarItem后，显示该item被选中的icon，并且显示内容

　　1. index.js创建路由条目（例如：首页，订单，购物车，用户档案），并且导入对应的.vue组件与路由条目进行绑定

　　2. 将tabBarItem组件与路由条目相关联

　　　　1. 四个item，与不同的路由条目关联，所以不能写死在tabBarItem中，而是通过App.vue向其传入路由条目，而tabBarItem中，使用props接收路由条目后，进行跳转即可

　　　　App.vue组件中：

<template>
  <div id="app">
    <router-view></router-view>
<!--    使用组件-->
    <tab-bar>
      <tab-bar-item link="/home">
        <img slot="item-icon" src="../src/assets/img/tabbar/index.png" alt="">
        <img slot="item-icon-active" src="../src/assets/img/tabbar/index2.png" alt="">
        <div slot="item-text">首页</div>
      </tab-bar-item>
      <tab-bar-item link="/date">
        <img slot="item-icon" src="../src/assets/img/tabbar/appointment.png" alt="">
        <img slot="item-icon-active" src="../src/assets/img/tabbar/appointment2.png" alt="">
        <div slot="item-text">日期</div>
      </tab-bar-item>
      <tab-bar-item link="/order">
        <img slot="item-icon" src="../src/assets/img/tabbar/order.png" alt="">
        <img slot="item-icon-active" src="../src/assets/img/tabbar/order2.png" alt="">
        <div slot="item-text">订单</div>
      </tab-bar-item>
      <tab-bar-item link="/profile">
        <img slot="item-icon" src="../src/assets/img/tabbar/user.png" alt="">
        <img slot="item-icon-active" src="../src/assets/img/tabbar/user2.png" alt="">
        <div slot="item-text">用户</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:{
    TabBar,      // 注册组件
    TabBarItem
  }
}
</script>

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


</style>

　　　　2. tabBarItem组件中：

　　　　　　1. 通过props接收 link 传入的路由条目

　　　　　　2. 通过v-on绑定事件onclik，onclik事件被触发时，进行路由跳转：this.$router.replace(this.link)

　　　　　　3. 在接收 icon 图片的 slot 中通过 v-if 来判断计算属性isActive是否为true,而isActive计算属性中，则通过this.$route.path.indexOf(this.link) !== -1 来判断传入的路由条目是否是活跃路由，从而返回结果true或false

　　　　　　2. 在App.vue中点击哪个item，则显示其被选中时的icon

<template>
  <div class="tab-bar-item" @click="onclick">
    <div v-if="!isActive">
      <slot name="item-icon"></slot>
    </div>
    <div v-else>
      <slot name="item-icon-active"></slot>
    </div>
    <div>
      <slot name="item-text"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "TabBarItem",
  props: {
    link: String,
  },
  data(){
    return{

    }
  },
  computed:{
    // 使用计算属性isActive来判断当前活跃的路由是否是props传入的路由，如果是则返回true
    isActive(){
      return this.$route.path.indexOf(this.link) !== -1
    },
  },
  methods:{
    onclick(){
      this.$router.replace(this.link)
    }
  },
}
</script>

<style scoped>
  .tab-bar-item{

    flex: 1;
    text-align: center;
    height: 49px;

    margin: auto;
    font-size: 14px;
  }
  .tab-bar-item img{
    width: 24px;
    height: 24px;
    margin-top: 3px;
    margin-bottom: 2px;
    /*去掉img标签的边缘空间*/
    vertical-align: middle;
  }
</style>

　　3. 其它可自定义：item选中后的字体颜色，希望能手动传入，而不是自动固定颜色

　　调整：

　　　　1. 在tabBarItem组件的props中，创建新的接收参数，如activeColor

　　　　2. 在tabBarItem组件的标签中，文字显示部分，标签中动态绑定:style属性，而给style赋予的样式，则使用新的计算属性activeStyle的返回值来作为样式。

　　　　　　activeStyle计算属性中，获取另一个计算属性isActive的返回值，从而设置：当某条路由活跃时，使用传入activeColor的值作为color的值。

　　　　　　　　return this.isActive ? {color: this.activeColor} : {}

　　　　　　tabBarItem组件修改后：

<template>
  <div class="tab-bar-item" @click="onclick" >
    <div v-if="!isActive">
      <slot name="item-icon"></slot>
    </div>
    <div v-else>
      <slot name="item-icon-active"></slot>
    </div>
　　<!-- 使用v-bind绑定style, 而计算属性activeStyle设置style的样式{color: 颜色}-->
    <div :style="activeStyle">
      <slot name="item-text"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "TabBarItem",
  props: {
    link: String,
    activeColor: {
      type: String,
      default: 'yellow'
    }
  },
  computed:{
    // 使用计算属性isActive来判断当前活跃的路由是否是props传入的路由，如果是则返回true
    isActive(){
      return this.$route.path.indexOf(this.link) !== -1
    },
    // 当标签的样式不是写在<style></style>中而是动态传入时，
    // 使用v-bind绑定一个style属性，在计算属性中根据条件动态决定样式选择
    // 此处：当isActive是true时，选择props中的值this.activeColor给color
    activeStyle(){
      return this.isActive ? {color: this.activeColor} : {}
    }
  },
  methods:{
    onclick(){
      this.$router.replace(this.link)
    }
  },
}
</script>

<style scoped>
  .tab-bar-item{

    flex: 1;
    text-align: center;
    height: 49px;

    margin: auto;
    font-size: 14px;
  }
  .tab-bar-item img{
    width: 24px;
    height: 24px;
    margin-top: 3px;
    margin-bottom: 2px;
    /*去掉img标签的边缘空间*/
    vertical-align: middle;
  }
</style>

　　　　　　App.vue中则是：

<template>
  <div id="app">
    <router-view></router-view>
<!--    使用组件-->
    <tab-bar>
<!-- 传入路由和点击后文字颜色 -->
      <tab-bar-item link="/home" activeColor="blue">
        <img slot="item-icon" src="../src/assets/img/tabbar/index.png" alt="">
        <img slot="item-icon-active" src="../src/assets/img/tabbar/index2.png" alt="">
        <div slot="item-text">首页</div>
      </tab-bar-item>
      <tab-bar-item link="/date" activeColor="blue">
        <img slot="item-icon" src="../src/assets/img/tabbar/appointment.png" alt="">
        <img slot="item-icon-active" src="../src/assets/img/tabbar/appointment2.png" alt="">
        <div slot="item-text">日期</div>
      </tab-bar-item>
      <tab-bar-item link="/order" activeColor="blue">
        <img slot="item-icon" src="../src/assets/img/tabbar/order.png" alt="">
        <img slot="item-icon-active" src="../src/assets/img/tabbar/order2.png" alt="">
        <div slot="item-text">订单</div>
      </tab-bar-item>
      <tab-bar-item link="/profile" activeColor="blue">
        <img slot="item-icon" src="../src/assets/img/tabbar/user.png" alt="">
        <img slot="item-icon-active" src="../src/assets/img/tabbar/user2.png" alt="">
        <div slot="item-text">用户</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:{
    TabBar,      // 注册组件
    TabBarItem
  }
}
</script>

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


</style>

2. 补充知识点：

　　（像上边手动传入字体颜色时不使用此该方法）

　　当标签中使用v-bind直接绑定class设置样式时

　　:class="{active: isActive}"

　　active是下边<style></style>中设置的样式的名称： .active{ color: yellow; }

　　isActie是判断条件

<template>
  <div class="tab-bar-item" @click="onclick" >
　　<div :class="{active: isActive}"></div>
      <slot name="item-text"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "TabBarItem",
　data(){
　　return{
　　　　isActive: true
　　}
　},
}
</script>

<style scoped>
  .active{
    color: yellow;
  }
</style>