Tabs

display page access history

Use

Basic Use

Automatic record routes

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

Custom Type

DefaultCardBorderCard

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

Props

Name	Description	Type	Accepted Values	Default
type	type of Tab	string	card / border-card	-
tab-position	position of tabs	string	top / right / bottom / left	top
stretch	whether width of tab automatically fits its container	boolean	-	false
keep-hidden-route	Whether to keep the route with the hidden flag, it is automatically closed by default	boolean	-	false
before-add	hook function before add tab. If `false` is returned or a `Promise` is returned and then is rejected, add will be prevented	Function({ route, oldPath, list, close, closeOther })	-	-
before-leave	hook function before switching tab. If `false` is returned or a `Promise` is returned and then is rejected, switching will be prevented	Function(activeName, oldActiveName)	-	-

Events

Name	Description	Parameters
tab-click	triggers when a tab is clicked	(pane: `TabsPaneContext`, ev: `Event`)
tab-change	triggers when `activeName` is changed	(path name)
tab-remove	triggers when tab-remove button is clicked	(path name)

Methods

Name	Description	Parameters
close	close some tab from tabs	path (the router of close)
closeOther	close other tab from tabs	-

Tabs #

Use #

Basic Use #

Custom Type #

Keep hidden route #

External call close #

Before add #

Before leave #

Props #

Events #

Methods #