我們在基于 Vue.js 的應用程式中使用 Vuetify 組件框架。有一個帶有一些內置組件的對話框。正如您在下面的螢屏截圖中看到的，兩個帶有紅色矩形的文本區域顯示了一些資訊。問題是我不需要垂直滾動條。我需要在 textarea 內有更多空間來完全顯示資訊。換句話說，我只需要增加對話框本身的高度即可增加包括文本區域在內的組件的高度。該對話框如下所示：
代碼如下所示：
<template>
<wrapper>
<v-dialog v-model="dialog" max-width="500px">
<v-card>
<v-card-title>
<span >Заявка ({{ 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>
我試圖改變幾個高度值，但沒有任何幫助。
uj5u.com熱心網友回復：
v-dialog 組件實際上是根據內容增長的。
您應該嘗試添加auto-growprop 以v-textarea使 textarea 在包含的文本超過其大小時自動增加大小。
vuetifyjs.com/en/components/textareas/#auto-grow
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/338428.html
標籤：Vue.js vuetify.js