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

系列导航

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

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

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

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

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

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>

base.css

body {
  padding: 0;
  margin: 0;
}

一些图片

四、代码按照步骤解释

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

2、数据放到App.vue

注：相应的样式也带过来，具体看源码