<template>
|
<div class="weui-tabbar">
|
<a href="javascript:;" class="weui-tabbar__item" :class="{'active': item.active}" v-for="item in menu" :key="item.view" @click="jumpmenu(item.view)">
|
<span class="weui-badge" v-if="item.badge">{{item.badge}}</span>
|
<div class="weui-tabbar__icon">
|
<i v-if="item.icon" class="fa fa-fw" :class="item.icon"></i>
|
<img v-if="item.imgurl" :src="item.imgurl" alt="">
|
</div>
|
<p class="weui-tabbar__label">{{item.name}}</p>
|
</a>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'tabbar',
|
props: {
|
menu: {
|
type: Array,
|
required: true
|
}
|
},
|
methods: {
|
jumpmenu (view) {
|
this.$router.push({name: view})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.weui-tabbar {
|
position: fixed;
|
max-width: 41.2rem;
|
}
|
.weui-tabbar__icon .fa {
|
color: #bbbbbb;
|
margin-left: -2px;
|
}
|
.weui-tabbar__icon .fa.fa-align-justify {
|
font-size: 20px;
|
position: relative;
|
top: 4px;
|
}
|
.weui-tabbar__label {
|
color: #000000;
|
}
|
.weui-tabbar__item.active .fa,.weui-tabbar__item.active .weui-tabbar__label {
|
color: red;
|
margin-left: -2px;
|
}
|
.weui-badge {
|
position: absolute;
|
top: 0;
|
right: 2em;
|
}
|
</style>
|
