cheetah-framework/js/framework/mixins/MoveTabs.js

Cheetah Framework JS used in all our applications

/*

Ajouter au template, le slot "tabs" avec un div ref="tabsPlaceholder" à l'intérieur
Ajouter le ref="tabs" au el-tags

<template slot="tabs">
  <div ref="tabsPlaceholder"></div>
</template>

<el-tabs ref="tabs" ...>
*/

export default {
  props: {
    myParentRefs: Object
  },

  data () {
    return {
      tabMoved: false
    }
  },

  methods: {
    initTabs () {
      let tabsPlaceholder = this.$refs.tabsPlaceholder

      if (!tabsPlaceholder && this.myParentRefs) {
        tabsPlaceholder = this.myParentRefs.tabsPlaceholder
      }

      if (!tabsPlaceholder) {
        // console.error('tabsPlaceholder not found')
        return
      }

      if (this.tabMoved) {
        return
      }

      tabsPlaceholder.innerHTML = ''

      const tabs = this.$refs.tabs

      if (tabs) {
        const nav = tabs.$refs.nav.$el

        tabsPlaceholder.appendChild(nav)

        this.tabMoved = true
      }
    }
  },

  mounted () {
    this.initTabs()
  }
}