Vue自定义Tabbar组件
文章描述：
Vue自定义Tabbar组件以及功能模块
Tabbar.vue
<template>
<div class="tabbar">
<ul>
<li v-for="(item,index) in routerList" :key="index" @click='switchTab(item.path)'>
<img :src="$route.path.includes(item.path) ? item.selected : item.active" />
</li>
</ul>
</div>
</template>script
export default{
data(){
return{
routerList:[
{
title:'首页',
path:'/',
active:'/images/tabbar/home.png',
selected:'/images/tabbar/home.png'
},
{
title:'生成账单',
path:'/order',
active:'/images/tabbar/money.png',
selected:'/images/tabbar/money.png'
},
{
title:'个人中心',
path:'/user',
active:'/images/tabbar/user.png',
selected:'/images/tabbar/user.png'
}
]
}
},
methods:{
switchTab(path){
//console.log(path)
//判断是否点击同一个路由
if(this.$route.path == path) return;
this.$router.replace(path)
}
}
}页面使用
import Tabbar from '../components/common/Tabbar.vue';
export default{
components:{
Tabbar,
},
}<Tabbar></Tabbar>
发布时间：2022/11/22
发表评论