自定义插槽

RouterTab 支持通过以下插槽个性化页签组件：

插槽名称	作用域	说明
default	tab	页签项
start	-	页签栏开始
end	-	页签栏结束

自定义页签项

通过 RouterTab 组件的默认作用域插槽，我们可以自定义页签显示的内容

插槽的作用域提供页签项信息 tab 供模板使用，包括以下属性或方法

属性	类型	说明
base	Component	RouterTab 实例
data	Object	页签数据
id	String	页签 ID
title	String	标题
tips	String	提示
icon	String	图标
tabClass	String	页签 class
closable	Boolean	是否可关闭
index	Number	页签索引
close	Function	页签关闭方法

Demo

示例：

<template>
  <router-tab :class="{ 'is-fullscreen': fullscreen }">
    <!-- 页签开始 -->
    <template #start>
      <router-link
        class="tab-slot-icon rt-icon-home"
        to="/slot/"
        title="首页"
      />
    </template>

    <!-- 页签结束 -->
    <template #end>
      <a
        class="tab-slot-icon"
        :class="fullscreen ? 'rt-icon-fullscreen-exit' : 'rt-icon-fullscreen'"
        :title="fullscreen ? '退出全屏' : '全屏'"
        @click="fullscreen = !fullscreen"
      />
    </template>

    <!-- 页签项插槽 -->
    <template #default="tab">
      <i v-if="tab.icon" class="router-tab__item-icon" :class="tab.icon" />
      <span class="router-tab__item-title" :title="tab.tips">{{
        tab.title
      }}</span>
      <span class="tab-badge">{{ tab.index }}</span>
      <i
        v-if="tab.closable"
        class="router-tab__item-close"
        @click.prevent="tab.close"
      />
    </template>
  </router-tab>
</template>

<script>
// 引入全屏混入
import fullscreen from '../../mixins/fullscreen'

export default {
  mixins: [fullscreen]
}
</script>

<style lang="scss" scoped>
.tab-badge {
  $s: 1.2em;
  display: inline-block;
  width: $s;
  height: $s;
  margin-left: 3px;
  color: #fff;
  font-size: 12px;
  line-height: $s;
  text-align: center;
  vertical-align: super;
  background-color: #f80;
  border-radius: 100%;
}

.router-tab__item.is-active .tab-badge {
  background-color: #f50;
}

// 页签前后插槽样式
.router-tab ::v-deep {
  .router-tab__slot-start,
  .router-tab__slot-end {
    display: flex;
    align-items: center;
  }
}

.tab-slot-icon {
  margin: 0 5px;
  color: #2c3e50;
  font-size: 20px;
  text-decoration: none;
  cursor: pointer;

  &:active {
    opacity: 0.8;
  }
}
</style>