如何在一个固定的(和隐藏的)vuetify应用程序栏下面放置一个粘性组件?

Question

我有一个Vuetify的v-app-bar，设置为hide-on-scroll

<v-app-bar
app
hide-on-scroll
ref="navbar"
id="navbar"
>

我也有v-tabs，我想把它粘起来下方位置:

<v-tabs
class="sticky"
grow
v-model="tab"
>
<v-tab :value="1">Tab 1</v-tab>
<v-tab :value="2">Tab 2</v-tab>
</v-tabs>

CSS sticky class:

.sticky {
position: sticky;
top: 0;
z-index: 1;
}

这在原则上是可行的。向下滚动时，应用程序栏消失，标签贴在屏幕顶部。好。

然而，由于v-app-bar被设置为滚动隐藏(我真的很想保持这种方式)，这意味着它在向下滚动时隐藏，向上滚动时重新出现。

问题是当它重新出现时，它将自己定位在v-app-bar的顶部。我如何定位v-标签总是隐藏/重新出现的v-应用程序栏以下?

我想到了一些方法，但到目前为止都失败了:

Js/Vue方法:如果我能知道v-app-bar是隐藏的，还是可见的，我就可以在粘贴的顶部添加48px。V-app-bar在出现/隐藏时不发出任何事件，但我可以从this.$refs.navbar.computedContentHeight或document.getElementById('navbar').clientHeight读取组件高度，唯一的问题是这些不是反应性的。

CSS的方法:导航条的位置是fixed，当它进入隐藏Vuetify添加一个类到它的v-app-bar--is-scrolled，所以有一些我们可能能够闩上。据我所知，它似乎没有任何性质。奇怪的是，我无法弄清楚什么CSS属性是用来隐藏栏，当我在Chrome开发工具中看到的状态之间转换时，提到的类被添加，但计算属性没有任何变化。

有什么好主意吗?(我会试着想出一个jsFiddle之类的东西，但现在没有时间了)

Answer 1

您可以使用#extension插槽:https://vuetifyjs.com/en/api/v-app-bar/#slots-extension

Answer 2

我通过使用扩展插槽来做到这一点。用在这种情况下,你想要一些元素隐藏显示在app-bar。

<v-app-bar
app
hide-on-scroll
ref="navbar"
id="navbar"
extension-height="extionsion's height"
>
<template v-slot:extension>
<v-tabs
class="sticky"
grow
v-model="tab"
>
<v-tab :value="1">Tab 1</v-tab>
<v-tab :value="2">Tab 2</v-tab>
</v-tabs>
</template>
</v-app-bar>