我们在基于Vue.js的应用程序中使用Vuetify组件框架。有一个对话框,上面有一些内置的组件。正如你在下面的截图中所看到的,两个带红色矩形的文本区域显示了一些信息。问题是我不需要垂直滚动条。我需要更多的文本空间来充分显示信息。换句话说,我只需要增加对话框本身的高度,以便增加包括文本区域在内的组件的高度。该对话框如下所示:
代码如下所示:
<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>
我已经尝试更改了几个高度值,但都没有帮助。
发布于 2021-10-27 07:55:46
v-dialog
组件实际上是基于内容增长的。
您应该尝试在v-textarea
中添加auto-grow
属性,以便在包含的文本超出其大小时自动增加文本区域的大小。
https://stackoverflow.com/questions/69734589
复制相似问题