1、本地模拟数据 建议不要用@来进行引入,直接调用本地的地址,即 ../../assets/.../.../...png
<template>
<div class="tab-bar">
<template v-for="(item, index) in tabbarData" :key="index">
<div class="tab-bar-item"
<!-- 文字颜色的变化 -->
:class="currentIndex===index? 'active': ' '"
<!-- 事件点击 来切换路由和当前的index-->
@click="itemClick(item,index)" >
<!-- 直接使用if 来进行渲染不同的照片 实现切换效果 -->
<!-- 因为使用的vite来进行开发 所以需要对静态本地照片进行处理 -->
<img v-if=" currentIndex !== index " :src="getNewURL(item.image)" />
<img v-else :src="getNewURL(item.imageActive)" />
<span>{{ item.text }}</span>
</div>
</template>
</div>
</template>
<script setup>
import { getNewURL } from "@/utils/getAssertImage";
import { ref } from "@vue/reactivity";
import { useRouter } from "vue-router";
const router = useRouter();
// 动态记录目前点击的位置
let currentIndex = ref(0)
const tabbarData = [
{
text: "首页",
image: "tabbar/tab_home.png",
imageActive: "tabbar/tab_home_active.png",
// 路由跳转
path: "/home",
},
{
text: "收藏",
image: "tabbar/tab_favor.png",
imageActive: "tabbar/tab_favor_active.png",
// 路由跳转
path: "/favor",
},
{
text: "订单",
image: "tabbar/tab_order.png",
imageActive: "tabbar/tab_order_active.png",
// 路由跳转
path: "/order",
},
{
text: "消息",
image: "tabbar/tab_message.png",
imageActive: "tabbar/tab_message.png",
// 路由跳转
path: "/message",
},
];
function itemClick(item,index){
currentIndex.value = index
router.push(item.path);
}
</script>
<style scoped>
.tab-bar {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px;
border-top: 1px solid #f3f3f3;
}
.tab-bar-item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
/* 纵向排列 */
flex-direction: column;
}
.tab-bar-item img {
width: 32px;
}
.tab-bar-item span {
margin-top: 3px;
font-size: 12px;
}
.active{
color: #FF9645;
}
</style>