小编Chr*_*ini的帖子

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

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

<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>
Run Code Online (Sandbox Code Playgroud)

scroll dialog toolbar vuetify.js

5
推荐指数
2
解决办法
2198
查看次数

标签 统计

dialog ×1

scroll ×1

toolbar ×1

vuetify.js ×1