Skip to content

Instantly share code, notes, and snippets.

@oceangravity
Created May 27, 2019 10:47
Show Gist options
  • Save oceangravity/b32d643e90d1f92eb798873df04872b1 to your computer and use it in GitHub Desktop.
Save oceangravity/b32d643e90d1f92eb798873df04872b1 to your computer and use it in GitHub Desktop.
<template>
<keep-alive>
<transition-group tag="div" name="tool" appear>
<div class="wk-tool-inner" v-for="number in [active]" v-bind:key="number">
<component :is="componentInstance"/>
</div>
</transition-group>
</keep-alive>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import wkToolLoading from './wkToolLoading'
export default {
data () {
return {
}
},
computed: {
...mapState(`main`, [
'menuItems',
'active'
]),
componentInstance () {
if (this.$options.components[this.menuItems[this.active].component]) {
return this.$options.components[this.menuItems[this.active].component]
} else {
return () => ({
// The component we want to load.
component: import(`../components/wk-tools/${this.menuItems[this.active].component}.vue`).then(m => {
const MountedMixin = {
mounted () {
const me = this
me.$nextTick(() => {})
}
}
m.default.mixins = []
m.default.mixins.push(MountedMixin)
return m.default
}),
// The component to use as a placeholder while the
// async component is loading.
loading: wkToolLoading,
// The component to render instead if there is an error
// loading the async component.
error: wkToolLoading,
// The delay before the loading component is shown.
delay: 10,
// If this timeout is reached, the async component is considered
// to have failed loading.
timeout: 50000
})
}
}
},
updated () {
},
methods: {
...mapActions(`main`, [
'SET_ACTIVE_MENU'
])
}
}
</script>
<style lang="scss">
.tool-enter-active {
animation: tool-in .5s;
}
.tool-leave-active {
animation: tool-out .5s;
}
@keyframes tool-in {
0% {
opacity: 0;
left: -5%
}
100% {
opacity: 1;
left: 0%
}
}
@keyframes tool-out {
0% {
opacity: 1;
left: 0%
}
100% {
opacity: 0;
left: 20%
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment