# 自定义插槽

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 页签关闭方法

示例:

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
上次更新: 2020/9/27 上午2:16:26