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

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

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

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

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