# PanelTabs 带多页签的 Panel
PanelTabs 组件即在 Panel 组件的基础上增加了多页签功能，使用方式与 Panel 组件一致。
# 如何引入
注意
当前框架内已全局引入该组件，可直接使用。
// PanelTabs 依赖 Panel 组件
import Panel from '@/components/panel'
import PanelTabs from '@/components/panel-tabs'
export default {
name: '',
components: {
Panel,
PanelTabs
},
...
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 使用示例
你可以直接复制使用此处代码
<template>
<page class="just-panel-demo" class-name="hw100">
<!-- 使用 w-*-* 样式使两个 Panel 按照 1:1 平分页面横向空间 -->
<!-- 使用 h100 样式使两个 Panel 占满页面纵向空间 -->
<panel
title="表具列表"
class="h100 w-2-1"
>
<!-- 表具列表 Panel 内容 -->
</panel>
<panel-tabs
v-model="activeTab"
:tabs="tabs"
class="h100 w-2-1"
>
<!-- 页签设置中的 name 属性值对应各个页签内容容器插槽 -->
<template #maintenance>
<!-- 维护记录页签内容 -->
</template>
<template #collection>
<!-- 采集历史页签内容 -->
</template>
<template #attachments>
<!-- 附件列表页签内容 -->
</template>
</panel-tabs>
</page>
</template>
<script>
export default {
name: 'just-panel-demo',
data () {
return {
activeTab: 'collection',
tabs: [
{
title: '维护记录',
name: 'maintenance'
},
{
title: '采集历史',
name: 'collection'
},
{
title: '附件列表',
name: 'attachments'
}
]
}
}
}
</script>
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
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
# 属性
Panel 组件的属性
PanelTabs 组件继承自 Panel 组件，接受 Panel 组件的全部 属性。
| 属性名称 | 属性说明 | 默认值 |
|---|---|---|
| tabs | [Array] 多页签列表。每个页签包含 title、name 两个属性：title 页签按钮文本name 页签名称，用于提供页签按钮与内容的映射关系以及内容插槽 | 无 |
| current-tab | [Number|String] 设定当前激活页签。当值为 Number 类型时表示 tabs 页签元素的索引，为 String 类型时表示页签元素的名称 | 无 |
| value | [Number|String] 用于 v-model 双向绑定，无需单独使用。双向绑定的 current-tab，参考 current-tab 属性。 | 无 |
| reset-tab | [Boolean|String] 当 tabs 更新时是否重置已激活页签为第一个 | false |
| panel-inset | [Boolean|String] 当 panel-tabs 组件嵌套于 panel 组件时，配置改属性可以更好的样式呈现 | false |
# 方法
| 方法名称 | 参数 | 说明 |
|---|---|---|
| setCurrentTab | [Number|String] index/name | 通过页签索引或名称激活页签，例： this.$refs.tabs.setCurrentTab(0) this.$refs.tabs.setCurrentTab('tab1') |
# 插槽
| 插槽名称 | 插槽说明 | 默认内容 |
|---|---|---|
| {name} | 每个页签元素的 name 属性值对应一个页签内容容器插槽 | 无 |
| default | Panel 组件内容区默认插槽 PanelTabs 组件中未分配给任何插槽的内容，将显示在页签内容容器的上方。 | 无 |
| actions-before | Panel 组件动作键前置插槽 | 无 |
| actions-after | Panel 组件动作键后置插槽 | 无 |
| panel-after | Panel 组件内容后置插槽 | 无 |