<template>
    <div class='v-breadcrumb'>
        <slot></slot>
    </div>
</template>

<script>
import { ref, provide, watch } from 'vue';
export default {
    name: 'breadcrumb',
    props: {
        separatorClass: String,
        separator: String,
        src: String,
    },
    setup(props, ctx) {
        watch(() => {
            return [props.separator, props.separatorClass, props.src];
        }, () => {
            rSeparatorClass.value = props.separatorClass;
            rSeparator.value = props.separator;
            rSrc.value = props.src;
        });

        const change = (value) => {
            ctx.emit('change', value);
        };

        let rSeparatorClass = ref(props.separatorClass);
        let rSeparator = ref(props.separator);
        let rSrc = ref(props.src);

        provide('separator-class', rSeparatorClass);
        provide('separator', rSeparator);
        provide('src', rSrc);
        provide('handleChange', change);
    }
}
</script>

<style lang='less'>
@import url('../../assets/css/scrollbar.css');
.v-breadcrumb {
    display: flex;
    align-items: center;
    & div:last-child {
        .v-separator-class, .v-separator {
            display: none;
        }
    }
}
</style>