48 lines
939 B
Vue
48 lines
939 B
Vue
|
<template>
|
||
|
|
<nav class="breadcrumb has-succeeds-separator">
|
||
|
|
<ul>
|
||
|
|
<li
|
||
|
|
v-for="(step, index) in steps"
|
||
|
|
:key="`step-${index}`"
|
||
|
|
:class="current === index ? 'is-active' : ''"
|
||
|
|
@click="change_step(index)"
|
||
|
|
>
|
||
|
|
<a>
|
||
|
|
<span class="icon is-small">
|
||
|
|
<font-awesome-icon :icon="step.icon" />
|
||
|
|
</span>
|
||
|
|
<span>{{ step.label }}</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { Options, Vue } from "vue-class-component";
|
||
|
|
|
||
|
|
type Step = {
|
||
|
|
label: string;
|
||
|
|
icon: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
@Options({
|
||
|
|
props: {
|
||
|
|
steps: Array,
|
||
|
|
current: Number,
|
||
|
|
},
|
||
|
|
emits: ["update:current"],
|
||
|
|
})
|
||
|
|
export default class extends Vue {
|
||
|
|
private steps!: Step[];
|
||
|
|
private current!: number;
|
||
|
|
|
||
|
|
private change_step(next_step: number) {
|
||
|
|
if (next_step === this.current) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.$emit("update:current", next_step);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|