1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| <template>
| <div class="weui-tabbar">
| <a href="javascript:;" class="weui-tabbar__item" :class="{'active': item.active}" v-for="item in menu" :key="item.type" @click="jumpmenu(item)">
| <span class="weui-badge" v-if="item.badge" style="position: absolute;top: 0;right: 2em;">{{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 (item) {
| this.$router.push({name: item.type})
| }
| }
| }
| </script>
|
| <style scoped>
| .weui-tabbar {
| position: fixed;
| max-width: 41.2rem;
| }
| .weui-tabbar__icon .fa {
| color: #bbbbbb;
| margin-left: -2px;
| }
| .weui-tabbar__label {
| color: #000000;
| }
| .weui-tabbar__item.active .fa,.weui-tabbar__item.active .weui-tabbar__label {
| color: red;
| opacity: 0.5;
| margin-left: -2px;
| }
| </style>
|
|
