vue mint navbar组件

 用法和tabbar很相似，一般一个在上面，一个在下面，，都可以加入图标和文字，默认字体是蓝色

每个item需要一个id标示，添加click事件时需要加native，否则无效

<template>
  <div class="page-navbar">
    <mt-navbar class="page-part" v-model="selected">
      <mt-tab-item v-for="i in navs" :id="i.name" :key="i.name" @click.native="change(i)">
        <img slot="icon" :src="selected==i.name ? i.active : i.base">
        {{i.name}}
      </mt-tab-item>
    </mt-navbar>

  </div>
</template>

<script>

  export default {
    name: "nav-mint",
    data() {
      return {
        selected: '电影',
        navs: [
          {
            'name': '电影',
            'path': '/main/collection/movie',
            active: "/static/imgs/movie_active.png",
            base: "/static/imgs/movie_base.png",
          },
          {
            'name': '影评',
            path: '/main/collection/review',
            active: "/static/imgs/comment_active.png",
            base: "/static/imgs/comment_base.png",

          }
        ]
      };
    },
    methods: {
      change(i) {
        console.log(i)
        this.$router.push(i.path)
      }
    }
  }
</script>

<style scoped>

</style>