TabBar中显示的内容由外界决定，可以传入图片文字等。
我们想制作这个东西，首先我们新建了一个tabbar的脚手架项目。
然后我们删除掉helloworld相关的内容，之后我们先写个大概试试：
asserts下面设置两个文件夹，用来装css样式和img图片。
body{
padding: 0;
margin: 0;
}
随便写个样式然后如何使用这个样式呢？当然是在App.vue的style标签中。
@import "./assets/css/base.css";
先把目标图片中的四个类别用div造出来：
<template>
<div id="app">
<div id="tab-bar">
<div class="tab-bar-item">首页</div>
<div class="tab-bar-item">分类</div>
<div class="tab-bar-item">购物车</div>
<div class="tab-bar-item">我的</div>
</div>
</div>
</template>
然后我们加上一些样式让它看起来像个人做的。
.tab-bar-item{
flex:1; //等间隔
text-align:center; //四个模块内容居中
height:49px; //手机端适配高度默认49
}
然后制作一下分割的线和tabbar背景色：
#tab-bar{
display: flex; //内容横着铺
background-color:#f6f6f6; #背景颜色
position:fixed; #位置
left:0;
right:0;
bottom:0;
box-shadow: 0px -3px 1px rgba(100,100,100,.3); #分割线颜色
}
效果：
感觉还可以哈。但是这样写代码以后肯定会很复杂很乱，我们需要封装然后放在各种文件夹里管理。
我们在components中设置一个tabbar文件夹，里面加入一个TabBar.vue文件，然后我们加入以下代码：
<template>
<div id="tab-bar">
<div class="tab-bar-item">
<img src="../../assets/img/tabbar/detec.png" >
<div>警察信息</div>
</div>
<div class="tab-bar-item">
<img src="~@/assets/img/tabbar/gun.svg" >
<div>武器分类</div>
</div>
<div class="tab-bar-item">
<img src="~@/assets/img/tabbar/letter.svg" >
<div>绑架信箱</div>
</div>
<div class="tab-bar-item">
<img src="~@/assets/img/tabbar/money.svg" >
<div>抢钱总计</div>
</div>
</div>
</template>
<script>
export default {
name:‘TabBar‘
}
</script>
<style scoped>
#tab-bar{
display: flex;
background-color:#f6f6f6;
position:fixed;
left:0;
right:0;
bottom:0;
box-shadow: 0px -3px 1px rgba(100,100,100,.3);
}
.tab-bar-item{
flex:1;
text-align:center;
height:49px;
}
.tab-bar-item img{
width:24px;
height:24px;
}
</style>
说白了就是把代码转移到这里来了，把这个TabBar当作一个组件。然后我们注册这个组件：
下面是App.vue的部分内容
<template>
<div id="app">
<tab-bar></tab-bar>
</div>
</template>
<script>
import TabBar from ‘./components/tabbar/TabBar‘
export default {
name: ‘App‘,
components: {
TabBar
}
}
</script>
这里我们加入一个tab-bar到template中，这个组件我们import后在components中注册。
这样我们实现了效果：
但是这样写代码可拓展性还是不好，我们应该用插槽的方法来对代码进行重构。也就是把TabBarItem单独提取出来，新建这个TabBarItem.vue文件：
<template>
<div class="tab-bar-item">
<slot name="item-icon"></slot>
<slot name="item-text"></slot>
</div>
</template>
<script>
export default {
name: ‘TabBarItem‘,
}
</script>
<style>
.tab-bar-item{
flex:1;
text-align:center;
height:49px;
margin-top:3px;
vertical-align: middle;
}
.tab-bar-item img{
width:24px;
height:24px;
}
</style>
下面都是样式，上面我们可以看到这个tabbaritem实际上由一个icon插槽和一个text插槽构成。那么tabbar呢？
<template>
<div id="tab-bar">
<slot></slot>
</div>
</template>
样式代码省略了，tabbar则由一个插槽构成，当然这个插槽实际就是值tabbaritem了。
那么界面呢？
<template>
<div id="app">
<tab-bar>
<tab-bar-item>
<img slot="item-icon" src="./assets/img/tabbar/cop.svg" >
<div slot="item-text">警察信息</div>
</tab-bar-item>
<tab-bar-item>
<img slot="item-icon" src="./assets/img/tabbar/gun.svg" >
<div slot="item-text">武器分类</div>
</tab-bar-item>
<tab-bar-item>
<img slot="item-icon" src="./assets/img/tabbar/letter.svg" >
<div slot="item-text">绑架信箱</div>
</tab-bar-item>
<tab-bar-item>
<img slot="item-icon" src="./assets/img/tabbar/money.svg" >
<div slot="item-text">抢钱总计</div>
</tab-bar-item>
</tab-bar>
</div>
</template>
当然是嵌套着把插槽都实现了，这样新添加也非常的方便，别忘记要在components也注册一下tabbarItem才可以。
import TabBar from ‘./components/tabbar/TabBar‘
import TabBarItem from ‘./components/tabbar/TabBarItem‘
export default {
name: ‘App‘,
components: {
TabBar,
TabBarItem
}
}
这样就可以了。
原文：https://www.cnblogs.com/snailbuster/p/12797888.html