duantuihe/components/tabBar/index.vue

<template>
	<view class="tab-bar">
		<view class="content">
			<view class="one-tab" v-for="(item, index) in tabBarList" :key="index" @click="selectTabBar(item.pagePath)">
				<view class="tabItem">
					<view class="tabItem_c" v-if="routePath === item.pagePath">
					</view>

					<view>
						<view class="tab-img">
							<image v-if="routePath === item.pagePath" class="img" :src="item.selectedIconPath"></image>
							<image v-else class="img" :src="item.iconPath"></image>
						</view>
					</view>
					<view v-if="routePath === item.pagePath" class="tit selectTexts">{{ item.text }}</view>
					<view v-else class="tit texts">{{ item.text }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 底部导航栏数据
			tabBarList: {
				type: Array,
				required: true
			},
			// 当前页面路径
			routePath: {
				type: String,
				required: true
			}
		},
		data() {
			return {};
		},
		methods: {
			selectTabBar(path) {
				this.$emit('onTabBar', path)
			}
		},
		created() {
			console.log('tabBarList----', this.tabBarList);
			console.log('routePath---', this.routePath);
		}
	};
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>