54 lines
1.1 KiB
Vue
54 lines
1.1 KiB
Vue
<template>
|
|
<nav class="breadcrumb is-centered has-background-danger-light is-fixed-top" aria-label="breadcrumbs" v-show="visible">
|
|
<ul class="mt-4">
|
|
<li v-for="(miga, i) in migas" :key="i" :class="{'is-active': i == migaActiva}">
|
|
<a :href="miga.href" v-text="miga.nombre"
|
|
:class="{'has-text-danger': i != migaActiva}"></a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
migas: []
|
|
}
|
|
},
|
|
computed: {
|
|
visible: function() {
|
|
return this.migas.length > 0
|
|
},
|
|
migaActiva: function() {
|
|
return this.migas.length-1
|
|
}
|
|
},
|
|
mounted() {
|
|
Event.$on('migas-setear-como-inicio', (miga) => {
|
|
this.migas = [];
|
|
this.migas.push(miga);
|
|
});
|
|
Event.$on('migas-agregar', (miga) => {
|
|
this.migas.push(miga);
|
|
});
|
|
Event.$on('migas-reset', () => {
|
|
this.migas = [];
|
|
});
|
|
Event.$on('migas-pop', () => {
|
|
this.migas.pop();
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
nav.breadcrumb.is-fixed-top {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 3.25rem;
|
|
height: 2.75rem;
|
|
z-index: 5;
|
|
}
|
|
</style> |