Vue底部导航栏封装组件

 1 <template>
 2   <div class='navbar'>
 3     <ul>
 4       <li v-for="(item,index) in items" :key="index" @click="changeToggle(item.to)">
 5         <p><img :src="$route.path==item.to?item.activeImg:item.normalImg" alt="" width="24" height="24"></p>
 6         <p class="text" :class="{active:item.to == $route.path}">{{item.text}}</p>
 7       </li>
 8     </ul>
 9   </div>
10 </template>
11   
12 <script>
13 export default {
14   data() {
15     return {
16       path:'',
17       items: [
18         {
19           text:"首页",
20           to:"/home",
21           normalImg:require('./../assets/complaint_01.png'),
22           activeImg:require('./../assets/complaint_02.png')
23         },
24          {
25           text:"登录",
26           to:"/login",
27           normalImg:require('./../assets/contact_01.png'),
28           activeImg:require('./../assets/contact_02.png')
29         },
30          {
31           text:"我的",
32           to:"/mine",
33           normalImg:require('./../assets/pay_01.png'),
34           activeImg:require('./../assets/pay_02.png')
35         }
36       ]
37     }
38   },
39   methods:{
40     changeToggle(value){
41       this.$router.push(value);
42     }
43   }
44 }
45 </script>
46   
47 <style scoped lang="less">
48   .navbar{
49     position: fixed;
50     bottom: 0;
51     width: 100%;
52     margin-bottom: 10px;
53     ul{
54       padding: 0 30px;
55       display: flex;
56       justify-content: space-between;
57       align-items: center;
58       li{
59         p{
60           &.active{
61             color: #EA5520!important;
62           }
63           padding: 0;
64           margin: 0;
65           &.text{
66             font-size: 14px;
67             color: #999999;
68           }
69         }
70       }
71     }
72   }
73 </style>