Tabs

display page access history

Use

Basic Use

Automatic record routes

<template>
  <pro-tabs />
</template>

Custom Type 

<template>
  <pro-radio-button
    v-model="type"
    :data="data"
    style="margin-bottom: 16px"
  />
  <pro-tabs
    ref="childTabs"
    :type="type"
  />
</template>

<script>
import { defineComponent, inject, onMounted, ref, shallowRef } from 'vue'

export default defineComponent({
  setup() {
    const tabs = inject('tabs', undefined) // Get top-level `Tabs` inject
    const childTabs = shallowRef({})
    const type = ref('')
    const data = [
      { value: '', label: 'Default' },
      { value: 'card', label: 'Card' },
      { value: 'border-card', label: 'BorderCard' },
    ]

    onMounted(() => {
      asyncList()
    })

    function asyncList() {
      if (tabs) {
        childTabs.value.list = tabs.value.list
      }
    }

    return {
      childTabs,
      type,
      data,
    }
  },
})
</script>

Keep hidden route

Routes with the hidden flag are automatically closed by default, this behavior can be prevented with keep-hidden-route

<template>
  <pro-tabs keep-hidden-route />
</template>

External call close

Use ref bind Tabs then execute internal methods to close tab

const tabs = inject('tabs') from top-level Layout refer

<template>
  <pro-tabs
    ref="childTabs"
    style="margin-bottom: 15px"
  />
  <el-button @click="childTabs.close('/en-US/guide/')">
    Close homepage
  </el-button>
  <el-button @click="childTabs.closeOther">
    Close otherpage
  </el-button>
  <el-button @click="asyncList">
    async
  </el-button>
</template>

<script>
import { defineComponent, inject, onMounted, shallowRef } from 'vue'

export default defineComponent({
  setup() {
    const tabs = inject('tabs', undefined) // Get top-level `Tabs` inject
    const childTabs = shallowRef({})

    onMounted(() => {
      asyncList()
    })

    function asyncList() {
      if (tabs) {
        childTabs.value.list = tabs.value.list
      }
    }

    return {
      childTabs,
      asyncList,
    }
  },
})
</script>

Before add

Do something before the tab add with the before-add hook. If false is returned or a Promise is returned and then is rejected, add will be prevented.

<template>
  <pro-tabs :before-add="beforeAdd" />
</template>

<script>
import { defineComponent, nextTick } from 'vue'
import { ElNotification } from 'element-plus'

export default defineComponent({
  setup() {
    function beforeAdd(e) {
      console.log('Tabs-before-add', e)
      nextTick(() => {
        ElNotification({
          type: 'success',
          title: 'Success',
          message: 'Come from before-add',
        })
      })
    }

    return {
      beforeAdd,
    }
  },
})
</script>

Before leave

Do something before the tab switch with the before-leave hook. If false is returned or a Promise is returned and then is rejected, add will be prevented.

<template>
  <pro-tabs
    ref="childTabs"
    :before-leave="beforeLeave"
  />
</template>

<script>
import { defineComponent, inject, onMounted, shallowRef } from 'vue'
import { ElNotification } from 'element-plus'

export default defineComponent({
  setup() {
    const tabs = inject('tabs', undefined) // Get top-level `Tabs` inject
    const childTabs = shallowRef({})

    onMounted(() => {
      asyncList()
    })

    function asyncList() {
      if (tabs) {
        childTabs.value.list = tabs.value.list
      }
    }

    function beforeLeave(activeName, oldActiveName) {
      console.log({ activeName, oldActiveName })
      ElNotification({
        type: 'success',
        title: 'Success',
        message: 'Come from before-leave',
      })
      return false
    }

    return {
      childTabs,
      beforeLeave,
    }
  },
})
</script>

Slots

Customize the label content of the tab through label

<template>
  <pro-tabs>
    <template #label="{ icon, title }">
      <div class="tabs-label-content">
        <el-icon
          :size="16"
          class="label-icon"
        >
          <component :is="icon" />
        </el-icon>
        <span>{{ title.toUpperCase() }}</span>
      </div>
    </template>
  </pro-tabs>
</template>

<style scoped>
.tabs-label-content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tabs-label-content .label-icon {
  margin-right: 6px;
}
</style>

Props

NameDescriptionTypeAccepted ValuesDefault
typetype of Tabstringcard / border-card-
tab-positionposition of tabsstringtop / right / bottom / lefttop
stretchwhether width of tab automatically fits its containerboolean-false
keep-hidden-routeWhether to keep the route with the hidden flag, it is automatically closed by defaultboolean-false
before-addhook function before add tab. If false is returned or a Promise is returned and then is rejected, add will be preventedFunction({ route, oldPath, list, close, closeOther })--
before-leavehook function before switching tab. If false is returned or a Promise is returned and then is rejected, switching will be preventedFunction(activeName, oldActiveName)--

Events

NameDescriptionParameters
tab-clicktriggers when a tab is clicked(pane: TabsPaneContext, ev: Event)
tab-changetriggers when activeName is changed(path name)
tab-removetriggers when tab-remove button is clicked(path name)

Methods

NameDescriptionParameters
closeclose some tab from tabspath (the router of close)
closeOtherclose other tab from tabs-

Slots

NameDescriptionType
labelcustomize the label content of the tab{ …route.meta, path, name }