/*
|
* @Author: hzq
|
* @Date: 2018-08-08 10:08:52
|
* @Last Modified by: hzq
|
* @Last Modified time: 2018-08-23 09:38:25
|
* @文件说明: 底部tabbar选项组件
|
* @使用方式：<f-footer index="2"></f-footer>
|
*/
|
<template>
|
<tabbar class="tabbar">
|
<tabbar-item v-for="(i,index) in footerMenu" :key="index" :selected="index===currIndex" @on-item-click="$router.push(i.router)">
|
<i slot="icon" class="iconfont" :class="i.icon"></i>
|
<span slot="label">{{i.label}}</span>
|
</tabbar-item>
|
</tabbar>
|
</template>
|
|
<script>
|
import {Tabbar, TabbarItem} from 'vux';
|
|
export default {
|
name: 'f-footer',
|
components: {Tabbar, TabbarItem},
|
data() {
|
return {
|
footerMenu: []
|
};
|
},
|
computed: {
|
currIndex() {
|
return this.footerMenu.findIndex(val => {
|
return val.router === this.$route.path;
|
});
|
}
|
},
|
created() {
|
this.footerMenu = sessionStorage.getItem('footerMenu');
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.tabbar {
|
position: fixed;
|
height: 49px;
|
z-index: 499;
|
&::before {
|
border-top-color: @color-line !important;
|
}
|
& /deep/ .weui-tabbar__icon {
|
height: 24px;
|
.iconfont {
|
font-size: @font-size-primary;
|
}
|
}
|
}
|
</style>
|
