WKComponentInstance.vue

<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>