<template>
    <div>
        <van-tabbar v-model="active">
            <van-tabbar-item to="/index">
                <span>首页</span>
                <img
                        slot="icon"
                        slot-scope="props"
                        :src="props.active ? icon.index_active : icon.index_normal"
                        style="width: 30px; height: 30px"
                >
            </van-tabbar-item>
            <van-tabbar-item to="/me">
                <span>我的</span>
                <img
                        slot="icon"
                        slot-scope="props"
                        :src="props.active ? icon.me_active : icon.me_normal"
                        style="width: 30px; height: 30px"
                >
            </van-tabbar-item>
        </van-tabbar>
        </div>
</template>

<script>
    import { Tabbar, TabbarItem } from 'vant';

    export default {
        name: "TabBar",
        components: {
            [Tabbar.name]: Tabbar, [TabbarItem.name]: TabbarItem
        },
        data() {
            return {
                active: this.activeI,
                icon: {
                    index_normal: require('../assets/index_icon_active.png'),
                    index_active: require('../assets/index_icon_active.png'),
                    me_normal: require('../assets/me_icon_active.png'),
                    me_active: require('../assets/me_icon_active.png')
                },
            }
        },
    }
</script>

<style scoped>

</style>