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>
複製代碼