<template>
    <div class="tab-bar">
        <van-tabbar v-model="active" route :placeholder="true">
            <van-tabbar-item replace to="/">
                <span>主页</span>
                <template #icon="props">
                    <img :src="props.active ? icon.active : icon.inactive" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item replace to="/portfolio" icon="search"><span>作品集</span>
                <template #icon="props">
                    <img :src="props.active ? icon.active : icon.inactive" />
                </template></van-tabbar-item>
            <van-tabbar-item replace to="/sampleCollection" icon="setting-o"><span>样品集</span>
                <template #icon="props">
                    <img :src="props.active ? icon.active : icon.inactive" />
                </template></van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
export default {
    name: 'TabBar',
    components: {},
    props: {},
    data() {
        return {
            active: 0,
            icon: {
                active: 'https://img01.yzcdn.cn/vant/user-active.png',
                inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
            },
        };
    },
    watch: {},
    computed: {},
    methods: {},
    created() { },
    mounted() { }
};
</script>
<style lang="less" scoped>
.tab-bar {
    max-width: 800px;
    margin: 0 auto;
}
</style>