mobile footer nav

item 数量可变，图片可变，高亮颜色可变

tabbar.vue

<template>
	<div class="tab-bar">
		<slot></slot>
	</div>
</template>
<script>
export default {
	name: "TabBar",
}

</script>
<style scoped>
.tab-bar {
	display: flex;
	/*让它一直处于底部 左右占满*/
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #f6f6f6;
	
    /*让它上面有一条过渡的线*/
	box-shadow: 0 -1px 1px rgba(100,100,100,.1);
}

</style>

TabBarItem.vue

<template>
	<div class="tab-bar-item" @click="goPage(link)">
		<div v-if="!isActive">
			<slot name="item-icon"></slot>
		</div>
		<div v-else>
			<slot name="item-icon-active"></slot>
		</div>
		<div :style="activeStyle">
			<slot name="item-text"></slot>
		</div>
	</div>
</template>
<script>
export default {
	name: "TabBarItem",
	props: {
		link: String,
		activeColor: {
			type: String,
			default: "red"
		}
	},
	computed: {
		isActive() { return this.$route.path.indexOf(this.link) !== -1; },
		activeStyle(){
			return this.isActive ? {color:this.activeColor}:{}
		}
	},
	methods: {
		goPage(link) {
			this.$router.push(this.link);
		},
	},
}

</script>
<style scoped>
.tab-bar-item {
	flex: 1;
	/*让每个项目都占相同的比例*/
	text-align: center;

	/*mobile 底部导航的通用高度就是49px*/
	height: 49px;

	cursor: pointer;
}

.tab-bar-item p {
	margin: 0;
}

.icon {
	width: 24px;
	height: 24px;
	vertical-align: middle;
	/*用来消除 image 周围的空隙 3px*/
  margin-top:3px;
  margin-bottom:2px;
}

</style>

TabBarMain.vue

<template>
	<div>
		<TabBar>
			<TabBarItem v-for="item in tabBarData" :key="item" :link="item.link" :activeColor="item.avtiveColor">
				<template v-slot:item-icon>
					<img :src="item.icon" class="icon" alt="">
				</template>
				<template v-slot:item-icon-active>
					<img :src="item.activeIcon" class="icon" alt="">
				</template>
				<template v-slot:item-text>
					<p>{{item.name}}</p>
				</template>
			</TabBarItem>
		</TabBar>
	</div>
</template>
<script>
import TabBar from '@/components/tabbar/TabBar'
import TabBarItem from '@/components/tabbar/TabBarItem'
export default {
	name: "App",
	data() {
		return {
			tabBarData: [{
					icon: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2457145072,1625315765&fm=26&gp=0.jpg",
					activeIcon: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fd.lanrentuku.com%2Fdown%2Fpng%2F0904%2FM-v-Player%2FM-v-Player_13.png&refer=http%3A%2F%2Fd.lanrentuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617591426&t=ced8bd1a6566e7951faee1761fee5302",
					name: "首页",
					link: "/home",
					avtiveColor: "blue"
				},
				{
					icon: require("@/assets/img/tabbar/cart.png"),
					activeIcon: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F41%2F51%2F35573d4377e4c5b.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617591426&t=30b5b6a9a4d90fa011b8208b3a90db1d",
					name: "购物车",
					link: "/cart",
					avtiveColor: "blue"
				},
				{
					icon: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F00%2F15%2F98%2F4056aecc947d04c.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617591426&t=b5c7a47c17e191ee6ed3628d7ec28b36",
					activeIcon: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F80%2F60%2F85574d8c3548d1a.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617591426&t=a55663e6b32dbc49c81975d1e856fab8",
					name: "分类",
					link: "/category",
					avtiveColor: "blue"
				},
				{
					icon: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F39%2F30%2F82573cb6758ba32.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617591426&t=0a1802371479031d23e65eafa98cb19a",
					activeIcon: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20190703%2F16%2F1562142576-LyutQDBNRh.jpg&refer=http%3A%2F%2Fimage.biaobaiju.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617591426&t=4479fa3539bbddf0590805251e4bccb3",
					name: "我的",
					link: "/profile",
					avtiveColor: "blue"
				},
			]
		}
	},
	components: { TabBar, TabBarItem },
}

</script>

App.vue

<template>
	<div id="app">
		<router-view />
		<tab-bar-main />
	</div>
</template>
<script>
import TabBarMain from '@/components/tabbar/TabBarMain'
export default {
	name: "App",
	components: { TabBarMain },
}

</script>
<style>
@import "./assets/css/base.css"
</style>