带有卡片和固定工具栏的 Vuetify 对话框

Question

正如标题所述，我有一个打开对话框的组件。该对话框包含一个卡片，顶部有一个工具栏，卡片内有一个窗体。我正在尝试修复工具栏，使其在滚动时不会消失。我试图将"fixed"属性添加到我的工具栏中，但似乎没有给我我期望的结果。以下是我的代码，提前感谢...

<template>
<v-dialog :value="createToggle" @input="onCancel" persistent :fullscreen="$vuetify.breakpoint.xsOnly" :max-width="dialogWidth">
<v-card>
<v-toolbar fixed flat>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon class="heading grey--text text--darken-4">close</v-icon>
</v-btn>
</v-toolbar>
<v-divider></v-divider>
<v-card-text>
<v-form ref="form">
<v-container>
<v-layout row wrap>
<v-subheader class="">
Section
</v-subheader>
<v-flex xs12 v-for="n in 20">
<v-text-field
label="Field Name"
outline
>
</v-text-field>
</v-flex>                                                                                     
</v-layout>
</v-container>
</v-form>
</v-card-text>
<v-card-actions> 
<v-btn>Cancel</v-btn> 
<v-btn>Save</v-btn>           
</v-card-actions>
</v-card>
</v-dialog>
</template>

Answer 1

对我来说，这是工作(Vuetify 版本 2(

1. 在<v-dialog>中添加scrollable道具
2. 在里面<v-card>使用<v-card-title>而不是<v-toolbar>
3. 然后你的<v-toolbar>放在<v-card>里面，fixed<v-toolbar>
4. 最后，在<v-card-title>中添加class="pa-0"以删除 v-card 标题元素中的填充

<小时 />

<template>
<!-- Add Scrollable Prop -->
<v-dialog scrollable :value="createToggle" @input="onCancel" persistent :fullscreen="$vuetify.breakpoint.xsOnly" :max-width="dialogWidth">
<v-card>

<v-card-title class="pa-0">
<v-toolbar flat>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon class="heading grey--text text--darken-4">close</v-icon>
</v-btn>
</v-toolbar>
</v-card-title>
...
<v-card-actions> 
<v-btn>Cancel</v-btn> 
<v-btn>Save</v-btn>           
</v-card-actions>
</v-card>
</v-dialog>
</template>

Answer 2

> 对于支持position: sticky(https://caniuse.com/css-sticky( 的浏览器，您可以使用纯 CSS 将工具栏设置为粘滞位于顶部：

.v-dialog > .v-card > .v-toolbar {
position: sticky;
top: 0;
z-index: 999;
}

如果您不希望此选择器适用于应用程序中发生这种情况的所有情况，则可以以不同的方式编写此选择器 - 例如，将特定类添加到工具栏。

Answer 3

就我而言，固定标题不起作用，直到我没有将div包装在v-card-text

<template>
<v-dialog v-model="modal" scrollable fullscreen>
<v-card>
<v-card-title>
<span>Title text</span>
</v-card-title>
<!-- VCardText after VCardTitle -->
<v-card-text>
<div>
...
</div>
</v-card-text>
</v-card>
</v-dialog>
</template>

Vuetify 语义对于正确使用所有功能非常重要(例如，在v-card中使用v-card-actions而不是自定义div(