vue tabBar导航栏设计实现3-进一步抽取tab-item

系列导航

一、vue tabBar导航栏设计实现1-初步设计

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

三、vue tabBar导航栏设计实现3-进一步抽取tab-item

四、vue tabBar导航栏设计实现4-再次抽取MainTabBar

五、vue tabBar导航栏设计实现5-最终版本

tabBar导航栏设计3-进一步抽取tab-item

一、本节目标效果

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

 

二、代码结构

 

 

 

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

三、代码

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

App.vue

<template>
	<div id="app">
		<tab-bar>
			<tab-bar-item>
				<template v-slot:item-icon>
					<img :src="require('./assets/img/tabbar/home.svg')">
				</template>
				<template v-slot:item-text>
					 <div slot="item-text">首页</div>
				</template>
			</tab-bar-item>
			<tab-bar-item>
				<template v-slot:item-icon>
					 <img :src="require('./assets/img/tabbar/category.svg')">
				</template>
				<template v-slot:item-text>
					 <div slot="item-text">分类</div>
				</template>
			</tab-bar-item>
			<tab-bar-item>
				<template v-slot:item-icon>
					<img :src="require('./assets/img/tabbar/shopcart.svg')">
				</template>
				<template v-slot:item-text>
					<div slot="item-text">购物车</div>
				</template>
			</tab-bar-item>
			<tab-bar-item>
				<template v-slot:item-icon>
					　<img :src="require('./assets/img/tabbar/profile.svg')">
				</template>
				<template v-slot:item-text>
					　<div slot="item-text">我的</div>
				</template>
			</tab-bar-item>
		</tab-bar>
	</div>
</template>


<script>
	import {
		defineComponent
	} from 'vue'
	import TabBar from './components/tabbar/TabBar'
	import TabBarItem from './components/tabbar/TabBarItem'
	export default defineComponent({
		//组件名称
		name: 'App',
		//接收父组件的数据
		props: {},
		components: {
			TabBar,
			TabBarItem
		},
		setup(props, ctx) {
			return {}
		}
	})
</script>

<style lang="scss">
	@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>

 

TabBarItem.vue

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

<script>
 
  import {defineComponent} from 'vue'
   
  export default defineComponent({
      //组件名称
      name:'TabBarItem',
      //接收父组件的数据
      props:{
      },
  	components: {
  	  
  	},
      setup(props,ctx){
          return{   
          }
      }    
  })	
</script>

<style lang="scss">
  .tab-bar-item {
    flex: 1;
    text-align: center;
    height: 49px;
    font-size: 14px;
  }

  .tab-bar-item img {
    width: 24px;
    height: 24px;
    margin-top: 3px;
    vertical-align: middle;
    margin-bottom: 2px;
  }
</style>

 

base.css

body {
  padding: 0;
  margin: 0;
}

 

一些图片

四、代码按照步骤解释

1、抽取TabBarItem组件，利用插槽使该组件独立

 

 

 

 

 

2、数据放到App.vue  注：具体看源码 引入TabBar和TabBarItem两个组件