在 PrimeVue 中使用徽章时选项卡下方有双线

Question

我使用 PrimeVue 有以下 vue 代码。

<template>
    <!-- OTHER STUFF HERE -->
    <TabView>
        <TabPanel>
            <template #header>
                <div class="flex align-items-center gap-2">
                    <i class="pi pi-envelope" />
                    <span>FOO</span>
                    <Badge :value="2" severity="danger" />
                </div>
            </template>
        </TabPanel>
        <TabPanel>
            <template #header>
                <div class="flex align-items-center gap-2">
                    <i class="pi pi-envelope" />
                    <span>BAR</span>
                    <Badge :value="20" severity="danger" />
                </div>
            </template>
        </TabPanel>
        <!-- <TabPanel>
            <template #header>
                <div class="flex align-items-center gap-2">
                    <i class="pi pi-envelope" />
                    <span>BAZ</span>
                </div>
            </template>
        </TabPanel> -->
    </TabView>
    <!-- OTHER STUFF HERE -->
</template>

上面的代码按预期工作（见下文）：

但是，当我添加一个新的

<TabPanel>

而没有

<Badge>

（上面代码中的注释部分）时，结果很奇怪（见下文）：

正如你所看到的，那里有一条双线。所以，目前我有 2 个选择，要么在所有选项卡标题上使用徽章，要么根本不使用徽章。

目前，这是我的尝试：

这看起来还不错，但我更愿意在选项卡没有徽章时删除双线。

知道如何解决这个问题吗？

Answer 1

选项卡都有底部边框，但是当高度相等时，您看不到它们单独的。没有徽章的选项卡使用的高度小于带有徽章的选项卡，因此底部边框变得不对齐。您需要使用 CSS 将选项卡上的高度设置为相等。

对于范围样式，这应该有效：

<style scoped>
.p-tabview :deep(.p-tabview-header-action) {
  height: 50px;
}
</style>

示例