67 lines
1.6 KiB
Vue
67 lines
1.6 KiB
Vue
<template>
|
|
<v-layout>
|
|
<v-flex xs12 text-xs-center mb-2>
|
|
<v-card color="blue lighten-4">
|
|
<v-card-text class="pb-0 pt-1">
|
|
<v-btn
|
|
v-for="tab in tabs"
|
|
:color="tab.code == active ? 'black' : 'grey lighten-5'"
|
|
class="black--text ma-0 tab-btn"
|
|
:class="[tab.code == active ? 'active' : '']"
|
|
@click="changeTab(tab.code)"
|
|
flat
|
|
:key="tab.code"
|
|
:data="tab"
|
|
:disabled="!tab.enabled"
|
|
>
|
|
<!-- <v-icon left dark>{{ tab.icon }}</v-icon> -->
|
|
<h6 class="title">{{ tab.label }}</h6>
|
|
</v-btn>
|
|
</v-card-text>
|
|
</v-card>
|
|
|
|
</v-flex>
|
|
</v-layout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.active {
|
|
border-bottom: solid 7px #000066!important;
|
|
}
|
|
|
|
.tab-btn {
|
|
min-width: 400px;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
module.exports = {
|
|
data () {
|
|
return {
|
|
|
|
}
|
|
},
|
|
|
|
methods : {
|
|
changeTab (x) {
|
|
// this.active = x;
|
|
this.$store.commit('change_tab', x);
|
|
}
|
|
},
|
|
|
|
computed : {
|
|
tabs : {
|
|
get () {
|
|
return this.$store.state.order.tabs
|
|
},
|
|
set (v) {
|
|
return
|
|
}
|
|
},
|
|
|
|
active () {
|
|
return this.$store.state.tab_active
|
|
}
|
|
}
|
|
}
|
|
</script> |