修复TabPage标签不显示问题:1. 修改TabPage组件使用panels属性渲染标签栏;2. 在DockLayout中传递panels属性给TabPage组件
This commit is contained in:
@@ -27,6 +27,7 @@
|
|||||||
:key="tabPage.id"
|
:key="tabPage.id"
|
||||||
:id="tabPage.id"
|
:id="tabPage.id"
|
||||||
:title="tabPage.title"
|
:title="tabPage.title"
|
||||||
|
:panels="tabPage.panels"
|
||||||
>
|
>
|
||||||
<!-- 在TabPage内渲染其包含的Panels -->
|
<!-- 在TabPage内渲染其包含的Panels -->
|
||||||
<Panel
|
<Panel
|
||||||
|
|||||||
@@ -1,34 +1,25 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="tab-page">
|
<div class="tab-page">
|
||||||
<!-- 当tabs为空时,不显示标签栏,直接渲染slot内容 -->
|
<!-- 使用panels数组渲染标签栏 -->
|
||||||
<div v-if="tabs.length > 0" class="tab-header">
|
<div v-if="panels && panels.length > 0" class="tab-header">
|
||||||
<div
|
<div
|
||||||
v-for="(tab, index) in tabs"
|
v-for="(panel, index) in panels"
|
||||||
:key="tab.id"
|
:key="panel.id"
|
||||||
:class="['tab-item', { 'active': activeTabIndex === index }]"
|
:class="['tab-item', { 'active': activeTabIndex === index }]"
|
||||||
@click="setActiveTab(index)"
|
@click="setActiveTab(index)"
|
||||||
>
|
>
|
||||||
{{ tab.title }}
|
{{ panel.title }}
|
||||||
<span
|
<span
|
||||||
v-if="tab.closable"
|
|
||||||
class="tab-close"
|
class="tab-close"
|
||||||
@click.stop="closeTab(tab.id)"
|
@click.stop="closeTab(panel.id)"
|
||||||
>×</span>
|
>×</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="tab-placeholder"></div>
|
<div class="tab-placeholder"></div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Tab页内容区域 -->
|
<!-- Tab页内容区域 -->
|
||||||
<div class="tab-content">
|
<div class="tab-content">
|
||||||
<!-- 当有tabs时,渲染tabs内容 -->
|
<!-- 渲染slot内容(Panel组件) -->
|
||||||
<template v-if="tabs.length > 0">
|
<slot></slot>
|
||||||
<div v-for="(tab, index) in tabs" :key="tab.id" :class="['tab-panel', { 'active': activeTabIndex === index }]">
|
|
||||||
<component :is="tab.component" v-bind="tab.props"></component>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<!-- 当没有tabs或tabs为空时,渲染slot内容 -->
|
|
||||||
<template v-else>
|
|
||||||
<slot></slot>
|
|
||||||
</template>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -39,15 +30,10 @@ import { defineProps, defineEmits, ref } from 'vue'
|
|||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
id: { type: String, required: true },
|
id: { type: String, required: true },
|
||||||
title: { type: String, default: '标签页' },
|
title: { type: String, default: '标签页' },
|
||||||
// 可选的标签页数组配置
|
// 从父组件传入的面板数组
|
||||||
tabs: {
|
panels: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => []
|
default: () => []
|
||||||
},
|
|
||||||
// 默认激活的标签页索引
|
|
||||||
activeIndex: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user