Question

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

现在，我遇到的问题是它对于较大的屏幕高度> 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

尝试在您的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

Answer 2

所以，我确实找到了解决方案，这是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>

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

2 个答案: