vux FooterBabbar组件

FooterBabbar组件

首页：

<FooterTabbar :tabbar-index="0"></FooterTabbar>
复制代码

import FooterTabbar from '@/components/FooterTabbar.vue'
export default {
    name: 'index',
    components: {FooterTabbar}
}
复制代码

FooterTabbar组件：

<style lang="scss">
.weui-tabbar {
  position: fixed !important;
  z-index: 500;
  background-color: #fff !important;
}
</style>

<template>
    <tabbar v-model="index">
        <tabbar-item link="./index">
            <img slot="icon" :src="require('@/assets/images/icon/icon-tab-index.png')">
            <img slot="icon-active"  :src="require('@/assets/images/icon/icon-tab-index2.png')">
            <span slot="label">首页</span>
        </tabbar-item>
        <tabbar-item v-show="showFind" link="./Find">
            <img slot="icon" :src="require('@/assets/images/icon/icon-tab-find.png')">
            <img slot="icon-active" :src="require('@/assets/images/icon/icon-tab-find2.png')">
            <span slot="label">发现</span>
        </tabbar-item>
        <tabbar-item link="./My">
            <img slot="icon" :src="require('@/assets/images/icon/icon-tab-my.png')">
            <img slot="icon-active" :src="require('@/assets/images/icon/icon-tab-my2.png')">
            <span slot="label">我的</span>
        </tabbar-item>
    </tabbar>
</template>

<script>
import { Tabbar, TabbarItem } from "vux";
export default {
  name: "FooterTabbar",
  components: { Tabbar, TabbarItem },
  props: {
    tabbarIndex: {
      default: 0
    }
  },
  data() {
    return {};
  },
  computed: {
    index: {
      get() {
        return this.tabbarIndex;
      },
      set() {}
    },
    showFind() {
      if (this.$store.state.base.userType == 2) {
        return true;
      } else {
        return false;
      }
    }
  }
};
</script>
复制代码