使 Vuetify 对话框全屏显示，内部可滚动列表，顶部和底部有内容

Question

我在对话框中遇到了 Vuetify 列表的问题。我的目标是拥有可用的页眉/页脚，并且在其中有一个可滚动的列表，所有这些内容的最大高度为 600 像素，但在较小的屏幕上进行调整。

现在，我有一个问题，它在更大的屏幕高度 > 600 像素时可以正常工作（我可以滚动列表 + 我在底部看到按钮）但在较小的屏幕上无法正常工作（可以滚动列表但必须在最后滚动查看按钮）。

有人知道我忘了添加什么吗？

<!-- MovementsInput component -->
<template>
  <v-form
  ref="form"
  v-model="valid"
  lazy-validation>
    <v-card
    >
      <v-card-title class="headline primary">
        Add new movement
      </v-card-title>
      <v-card-text>
        <v-list
          style="max-height: 600px"
          class="scroll-y">
          <template 
            v-for="movement in movements">
            <v-list-tile
            :key="movement.name">
              <v-list-tile-title>
                {{movement.name}}
              </v-list-tile-title>
            </v-list-tile>
          </template>
        </v-list>
        <!-- Ignore this autocomplete, forget to remove it from screenshot -->
        <v-autocomplete
          v-model="movement"
          :items="movements"
          :color=this.$vuetify.theme.secondary
          hide-selected
          item-text="name"
          item-value="name"
          label="Movement"
          placeholder="Select movement from the list"
          return-object
        ></v-autocomplete>
      </v-card-text>
      <v-card-actions>
          <v-btn
          color="grey"
          @click="cancelClicked"
        >
          Cancel
          <v-icon right>fa-undo</v-icon>
        </v-btn>
        <v-spacer></v-spacer>
        <v-btn
          :disabled="!valid"
          :rules="[v => !!v || 'Everything has to be valid']"
          required
          color="primary"
          @click="confirmClicked"
        >
          Confirm
          <v-icon right>fa-check</v-icon>
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-form>
</template>

<!-- Other file, all this is for now called in simple Vuetify dialog -->
<v-dialog
 persistent
 :value="true"
>
 <MovementsSelect />
</v-dialog>

Answer 1

所以，我确实找到了解决方案，这里是 Vuetify 文档中的完整示例。

<template>
  <v-layout row justify-center>
    <v-dialog v-model="dialog" persistent max-width="600px">
      <template v-slot:activator="{ on }">
        <v-btn color="primary" dark v-on="on">Open Dialog</v-btn>
      </template>
      <v-card>
        <v-card-title>
          <span class="headline">User Profile</span>
        </v-card-title>
        <v-card-text>
          <v-container grid-list-md>
            <v-layout wrap>
              <v-flex xs12 sm6 md4>
                <v-text-field label="Legal first name*" required></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-text-field label="Legal middle name" hint="example of helper text only on focus"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-text-field
                  label="Legal last name*"
                  hint="example of persistent helper text"
                  persistent-hint
                  required
                ></v-text-field>
              </v-flex>
              <v-flex xs12>
                <v-text-field label="Email*" required></v-text-field>
              </v-flex>
              <v-flex xs12>
                <v-text-field label="Password*" type="password" required></v-text-field>
              </v-flex>
              <v-flex xs12 sm6>
                <v-select
                  :items="['0-17', '18-29', '30-54', '54+']"
                  label="Age*"
                  required
                ></v-select>
              </v-flex>
              <v-flex xs12 sm6>
                <v-autocomplete
                  :items="['Skiing', 'Ice hockey', 'Soccer', 'Basketball', 'Hockey', 'Reading', 'Writing', 'Coding', 'Basejump']"
                  label="Interests"
                  multiple
                ></v-autocomplete>
              </v-flex>
            </v-layout>
          </v-container>
          <small>*indicates required field</small>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="dialog = false">Close</v-btn>
          <v-btn color="blue darken-1" flat @click="dialog = false">Save</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

Answer 2

尝试在您的 MovementsInput 组件中添加 v-app。 你的组件应该是这样的：

<template>
  <v-app>
   <!-- your component code here -->
  </v-app>
</template>

更多信息在这里：https://vuetifyjs.com/en/getting-started/frequently-asked-questions#my-application-does-not-look-correct