Tabs

根据浏览记录自动记录历史 tab

使用

基础用法

将自动记录路由变化

<template>
  <pro-tabs />
</template>
显示代码

外部调用关闭

通过 ref 绑定 Tabs 进而通过外部调用关闭 tab 页

const tabs = inject('tabs') 由顶层 Layout 注入 参考

<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>
显示代码

配置

参数说明类型可选值默认值
type风格类型stringcard / border-card-
tab-position标签位置stringtop / right / bottom / lefttop
stretch标签的宽度是否自撑开boolean-false
before-leave切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。Function(activeName, oldActiveName)--

事件

事件名说明参数
tab-clicktab 被选中时触发(pane: TabsPaneContext, ev: Event)
tab-changeactiveName 变动后触发(path name)
tab-remove关闭时触发(path name)

方法

方法名说明参数
close从 tabs 中关闭指定路由的页面path (需要关闭页面的路由)
closeOther从 tabs 中关闭除当前路由的其它路由-