目前,API 中没有单一的道具。
但是您可以通过内置的 vuetify 类和指令帮助自己。
首先,你(很遗憾)需要编写一些 CSS 来手动禁用初始页面滚动:
html {
overflow-y: hidden;
}
.scrollable {
overflow-y: scroll;
}
然后,您需要<v-main>
使用类将组件添加到您的应用程序中,scrollable pt-0 mt-16
并将您未来的所有应用程序组件包装到其中。此类将从默认值调整填充<v-app-bar>
并直接启用滚动<v-main>
。
最后,您应该添加v-resize
指令以<v-main>
在用户调整页面大小时自动重新计算页面大小:
<v-main class="scrollable pt-0 mt-16" v-resize="onResize">
...your application data...
</v-main>
...
methods: {
onResize() {
//64px is v-app-bar height in your case
document.querySelector(".scrollable").style.height = (window.innerHeight - 64) + 'px';
}
},
而已。然后,您可以创建自定义组件来包装<v-main>
并忘记此类操作。
带有示例的 Codepen 链接