dingding/src/components/TabBar/index.vue

<template>
    <van-tabbar :value="tabbarActive" @change="handleTabbarChange" route>
        <van-tabbar-item v-for="(item, idx) in tabbarList" :key="idx" :to="item.to" replace>
            <span>{{ item.title }}</span>
            <template #icon="props">
                <img v-if="props.active" :src="item.iconSel" />
                <img v-else :src="item.icon" />
            </template>
        </van-tabbar-item>
    </van-tabbar>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
    name: 'TabBar',
    computed: {
        ...mapGetters(['tabbarIdx'])
    },
    data() {
        return {
            tabbarActive: this.tabbarIdx,
            tabbarList: [
                {
                    title: '首页',
                    to: '/',
                    icon: require("@/assets/icons-index.png"),
                    iconSel: require("@/assets/icons-index-sel.png"),
                },
                {
                    title: '审批',
                    to: '/approve',
                    icon: require("@/assets/icons-approve.png"),
                    iconSel: require("@/assets/icons-approve-sel.png"),
                },
                {
                    title: '我的',
                    to: '/my',
                    icon: require("@/assets/icons-my.png"),
                    iconSel: require("@/assets/icons-my-sel.png"),
                },
            ]
        }
    },
    methods: {
        handleTabbarChange(index) {
            this.tabbarActive = index
            this.$store.commit({
                type: 'app/SET_TABBAR',
                tabbarIdx: index
            })
        }
    }
}
</script>