Vue封裝公共組件TarBar

github：https://github.com/zwnsyw/TabBar

一、實現簡單思路

　　　1.在頁面底部有一個單獨的TabBar組件1.1自定義TabBar組件，在APP中使用1.2讓TabBar出於底部，並設置相關的樣式

    2.TabBar中顯示的內容由外界決定
        2.1定義插槽
        2.2flex布局平分TabBar
        
    3.自定義TabBarItem，可以傳入 圖片和文字
        3.1定義TabBarItem，並且定義兩個插槽：圖片、文字。
        3.2給兩個插槽外層包裝div，用於設置樣式。
        3.3填充插槽，實現底部TabBar的效果
        
    4.傳入 高亮圖片
        4.1定義另外一個插槽，插入active-icon的數據
        4.2定義一個變量isActive，通過v-show來決定是否顯示對應的icon
        
    5.TabBarItem綁定路由數據
        5.1安裝路由：npm install vue-router —save
        5.2完成router/index.js的內容，以及創建對應的組件
        5.3main.js中注冊router
        5.4APP中加入<router-view>組件
        
    6.點擊item跳轉到對應路由，並且動態決定isActive
        6.1監聽item的點擊，通過this.$router.replace()替換路由路徑
        6.2通過this.$route.path.indexOf(this.link) !== -1來判斷是否是active
        
    7.動態計算active樣式
        7.1封裝新的計算屬性：this.isActive ? {'color': 'red'} : {}

二、使用

　　　1. App.vue里面引入MainTabBar

　　　1.1在MainTabBar里面填充插槽

三、預覽：