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

Question

如标题所示，我有一个打开对话框的组件。该对话框包含一个卡，该卡的顶部有一个工具栏，卡中有一个表格。我正在尝试固定工具栏，使其在滚动时不会消失。我试图将“固定”属性添加到我的工具栏，但似乎没有给我我期望的结果。以下是我的代码，在此先感谢...

<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. 添加scrollable道具<v-dialog>
2. 内部<v-card>使用<v-card-title>而不是<v-toolbar>
3. 然后你<v-toolbar>把它放进去<v-card>并取出fixed支柱<v-toolbar>
4. 最后，添加class="pa-0"用于<v-card-title>删除 v-card-title 元素中的填充的内容

<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;
}

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