Question

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

    int id=1;

    switch(id){
        default: 
            boolean b= false; // all switch scope going down, because there is no scope tag

        case 1:
            b = false;
        case 2:{
            //String b= "test"; you can't declare scope here. because it's in the scope @top
            b=true; // b is still accessible
        }
        case 3:{
            boolean c= true; // case c scope only
            b=true; // case 3 scope is whole switch
        }
        case 4:{
            boolean c= false; // case 4 scope only
        }
    }

Answer 1

对我来说这是工作（Vuetify版本2）

在scrollable中添加<v-dialog>道具
在<v-card>内部使用<v-card-title>代替<v-toolbar>
然后将您的<v-toolbar>放在<v-card>内，并从fixed中移除<v-toolbar>道具
最后，在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;
}

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

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-actions 中使用 v-card 而不是自定义 div）

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

3 个答案: