| 1 | <template>
|
| 2 | <transition-group :name="$zircle.getNavigationMode() === 'forward' ? 'z-next' : 'z-prev'" tag="section">
|
| 3 | <component
|
| 4 | v-for="view in views"
|
| 5 | :is="view.component"
|
| 6 | :class="{
|
| 7 | 'is-current-view': $zircle.getCurrentViewName() === view.name && $zircle.getRouterState() === false,
|
| 8 | 'is-previous-view': $zircle.getPreviousViewName() === view.name,
|
| 9 | 'is-past-view': $zircle.getPastViewName() === view.name
|
| 10 | }"
|
| 11 | :key="view.name">
|
| 12 | </component>
|
| 13 | <router-view
|
| 14 | v-if="$zircle.getRouterState() === true && $zircle.getHistoryLength() >= 1"
|
| 15 | class="is-current-view"
|
| 16 | :key="$zircle.getCurrentViewName()">
|
| 17 | </router-view>
|
| 18 | </transition-group>
|
| 19 | </template>
|
| 20 |
|
| 21 | <script>
|
| 22 | export default {
|
| 23 | name: 'z-view-manager',
|
| 24 | computed: {
|
| 25 | views () {
|
| 26 | return this.$zircle.getRouterState() === false ? this.$zircle.getHistory().slice(-3) : this.$zircle.getHistory().slice(-3, -1)
|
| 27 | }
|
| 28 | }
|
| 29 | }
|
| 30 | </script>
|