vue tabBar导航栏设计实现2-抽取tab-bar

系列导航

tabBar导航栏设计2-抽取tab-bar

一、本节目标效果

抽取一个tab-bar组件负责导航栏的布局

二、代码结构

注：主要是标红的几个文件

三、代码

重新编写这几个文件中的代码

App.vue

<template>
  <div  id="app">
    <tab-bar>
        <div  class="item">
                <img :src="require('./assets/img/tabbar/home.svg')">
                首页
            </div>
          <div  class="item">
                <img :src="require('./assets/img/tabbar/category.svg')">
                分类
            </div>
          <div  class="item">
                <img :src="require('./assets/img/tabbar/shopcart.svg')">
                购物车
            </div>
          <div  class="item">
                <img :src="require('./assets/img/tabbar/profile.svg')">
                我的
            </div>
          
         
    </tab-bar>
  </div>
</template>
 
 
<script>
import {defineComponent} from 'vue'
import TabBar from './components/tabbar/TabBar'
export default defineComponent({
    //组件名称
    name:'App',
    //接收父组件的数据
    props:{
    },
    components: {
      TabBar
    },
    setup(props,ctx){
        return{   
        }
    }    
})
</script>
  
<style lang="scss">
    .item{
        flex: 1; //等分
        text-align: center; //等分后居中
        height: 49px; //设置高度
        font-size: 14px; //设置字体大小
    }
     
    .item img {
      width: 24px;
      height: 24px;
      margin-top: 3px;
      vertical-align: middle;
      margin-bottom: 2px;
    }
     
   @import "./assets/css/base.css"; 
</style>

TabBar.vue

<template>
  <div id="tab-bar">
      <slot></slot>
  </div>  
</template>
 
<script>
     
import {defineComponent} from 'vue'
  
export default defineComponent({
    //组件名称
    name:'TabBar',
    //接收父组件的数据
    props:{
    },
    components: {
       
    },
    setup(props,ctx){
        return{   
        }
    }    
})  
     
  
</script>
 
<style lang="scss">
  #tab-bar {
    display: flex;
    background-color: #f6f6f6;
 
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
 
    box-shadow: 0 -1px 1px rgba(100,100,100,.2);
  }
   
   
 
</style>