cheetah-framework/js/framework/mixins/TabView.js

Cheetah Framework JS used in all our applications

/* global _ */
const defaultTab = 'home'

import MoveTabs from './MoveTabs'

export default {
  tabRefId: 'tab',
  cacheActiveTab: true,

  mixins: [MoveTabs],

  props: {
    tab: String
  },

  data () {
    return {
      activeTab: this.$options.defaultTab ? this.$options.defaultTab : defaultTab,
      activeTabs: []
    }
  },

  methods: {
    handleTabClick () {
      if (this.$options.cacheActiveTab) {
        this.$router.replace({
          query: _.extend({}, this.$route.query, { [this.$options.tabRefId]: this.activeTab })
        }).catch(RouterError)
      }
    },
    tabVisible (tabName) {
      if (_.includes(this.activeTabs, tabName)) {
        return true
      }

      if (this.activeTab === tabName) {
        this.activeTabs.push(tabName)
        return true
      }

      return false
    },
    resetTabViewed () {
      this.activeTabs = [this.activeTab]
    }
  },

  created () {
    if (this.$route.query[this.$options.tabRefId]) {
      this.activeTab = this.$route.query[this.$options.tabRefId]
    }
  }
}