73 lines
1.6 KiB
Vue
73 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<van-tabbar v-model="active" @change="changeTabbar" active-color="#3296fa" inactive-color="#333">
|
||
|
|
<van-tabbar-item v-for="(item,index) in tabbars" :key="index" :to="(item.path)">
|
||
|
|
<div class="van-tabbar-item__icon">
|
||
|
|
<i class="awsui-iconfont" v-html="item.icon"></i>
|
||
|
|
</div>
|
||
|
|
<div class="van-tabbar-item__text">{{item.title}}</div>
|
||
|
|
</van-tabbar-item>
|
||
|
|
</van-tabbar>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'tabbar',
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
active: 0,
|
||
|
|
tabbars: [
|
||
|
|
{
|
||
|
|
path: '/',
|
||
|
|
name: 'knwlhome',
|
||
|
|
title: '首页',
|
||
|
|
icon: ''
|
||
|
|
},
|
||
|
|
{
|
||
|
|
path: '/knwldir',
|
||
|
|
name: 'knwldir',
|
||
|
|
title: '目录',
|
||
|
|
icon: ''
|
||
|
|
},
|
||
|
|
{
|
||
|
|
path: '/myknwl',
|
||
|
|
name: 'myknwl',
|
||
|
|
title: '我的',
|
||
|
|
icon: ''
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
changeTabbar(){
|
||
|
|
localStorage.setItem("activeTab",'');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created () {
|
||
|
|
if (this.$route.name === 'knwlhome') {
|
||
|
|
this.active = 0
|
||
|
|
} else if (this.$route.name === 'knwldir') {
|
||
|
|
this.active = 1
|
||
|
|
} else if (this.$route.name === 'myknwl') {
|
||
|
|
this.active = 2
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||
|
|
<style>
|
||
|
|
.van-tabbar-item {
|
||
|
|
text-align: center;
|
||
|
|
color: #333333;
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.van-tabbar-item__icon {
|
||
|
|
margin-top: -3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.van-tabbar--fixed {
|
||
|
|
border-top: 0.33px solid #e9e9e9;
|
||
|
|
}
|
||
|
|
</style>
|