46 lines
1.2 KiB
Vue
46 lines
1.2 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 @click="clickMiga({ miga: miga })" v-text="miga.nombre"
|
|
:class="{'has-text-danger': i !== migaActiva}"></a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions, mapMutations, mapState } from "vuex";
|
|
|
|
export default {
|
|
methods: {
|
|
...mapActions('productos', ["getProductos"]),
|
|
...mapActions('ui', ["clickMiga"]),
|
|
...mapMutations('ui', ["addMiga"]),
|
|
},
|
|
computed: {
|
|
...mapState('ui', ["migas"]),
|
|
visible() {
|
|
return this.migas.length > 0;
|
|
},
|
|
migaActiva() {
|
|
return this.migas.length - 1;
|
|
},
|
|
},
|
|
mounted() {
|
|
this.addMiga({ nombre: 'Categorias', action: 'productos/getProductos' });
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
nav.breadcrumb.is-fixed-top {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 3.25rem;
|
|
height: 2.75rem;
|
|
z-index: 5;
|
|
}
|
|
</style>
|