vue商城底部导航栏功能

底部导航栏TabBar的实现

1. 自定义TabBar组件，在APP中使用
   让TabBar处于底部，并设置相关样式。
2. TabBar中显示的内容由外界决定
   定义插槽slot，flex布局平分TabBar。
3. 自定义TabBarItem，可以传入图片和文字
   定义props属性，存放路径link,实现路由动态跳转；
   定义TabBarItem，并且定义两个插槽，图片和文字；
   给两个插槽外层包装div,用于设置样式；
   填充插槽，实现底部TabBar的效果；

TabBar的封装

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

#tab-bar {
   
    /* 利用flex进行布局 */
    display: flex;
    /* 本身的样式 */
    background-color: #f6f6f6;
    height: 49px;
    border-top: 1px solid rgba(100, 100, 100, .1);
    box-shadow: 0px -1px 1px rgba(150,150,150,.08);

    /* 定位相关 */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
  }

TabBarItem的封装

定义两个插槽，动态决定里面放什么图片和文字。
图片分两种，一种普通图片，一种处于活跃状态的时候的图片。

<template>
  <div id="tab-bar-item">
    <div class="item-icon"><slot name="icon"></slot></div>
    <div class="item-active-icon">