如何在 Vuetify 框架中增加对话框的高度？

Question

我们在基于 Vue.js 的应用程序中使用 Vuetify 组件框架。有一个对话框，上面有一些内置组件。正如您在下面的屏幕截图中看到的，两个带有红色矩形的文本区域显示了一些信息。问题是我不需要垂直滚动条。我需要更多 space inside textareas 来完整显示信息。换句话说，我只需要增加对话框本身的高度，以增加包括文本区域在内的组件的高度。对话框如下所示：

代码如下所示：

<template>
  <wrapper>
    <v-dialog v-model="dialog" max-width="500px">
      <v-card>
        <v-card-title>
          <span class="headline">Заявка ({{ editedItem.id }})</span>
        </v-card-title>

        <v-card-text>
          <v-container grid-list-md>
            <v-layout wrap>
              <v-flex>
                <v-text-field v-model="editedItem.status" label="Статус"></v-text-field>
              </v-flex>
              <v-flex>
                <v-text-field v-model="editedItem.comment" label="Комментарий"></v-text-field>
              </v-flex>
              <v-flex>
                <v-textarea :value="fullName(editedItem.user)" label="Клиент" rows="2" disabled></v-textarea>
              </v-flex>
              <v-flex>
                <v-textarea :value="unitName(editedItem.search_by)" label="Студия" rows="2" disabled></v-textarea>
              </v-flex>
              <v-flex>
                <v-textarea v-if="editedItem.services" :value="studio(editedItem.services)" label="Услуги" rows="2" disabled></v-textarea>
              </v-flex>
              <v-flex>
                <v-textarea v-if="editedItem.periods" :value="desiredTime(editedItem.periods)" label="Желаемое время" rows="2" disabled></v-textarea>
              </v-flex>
              <v-flex>
                <v-text-field :value="formatDateWithoutHours(editedItem.date)" label="Желаемая дата" disabled></v-text-field>
              </v-flex>
              <v-flex>
                <v-text-field :value="formatDate(editedItem.created_at)" label="Дата создания" disabled></v-text-field>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card-text>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="close">Cancel</v-btn>
          <v-btn color="blue darken-1" flat @click="save">Save</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

我尝试更改几个高度值，但没有任何帮助。

Answer 1

v-dialog 组件实际上是根据内容增长的。

您应该尝试将 auto-grow 属性添加到 v-textarea 以使文本区域在包含的文本超过其大小时自动增加大小。

vuetifyjs.com/en/components/textareas/#auto-grow

如何在 Vuetify 框架中增加对话框的高度？

How to increase the dialog's height in Vuetify framework?

vue.js

vuetify.js