如图,封装tabbar组件(其他项目中可复用)
开发过程:
1、TabBar 和 TabBarItem 组件封装
2、给TabBarItem传入active图片
3、TabBarItem 和 路由(router)结合
4、TabBarItem的颜色动态控制
TabBarItem.vue页面:
<template>
<div class="tabbar-item" @click="itemClick">
<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: {
path: String,
activeColor: {
type: String,
default: "red"
}
},
data() {
return {
// isActive: true
};
},
computed: {
isActive() {
return this.$route.path.indexOf(this.path) !== -