Как исправить действия Vuetify v-card, такие как нижний колонтитул на v-card? - PullRequest
0 голосов
/ 07 февраля 2020

У меня есть v-card компонент и v-card-actions с двумя кнопками. В моей форме пользователь может ввести изображение, и высота компонента будет увеличиваться при загрузке изображения пользователем, поэтому кнопки будут перемещаться до конца страницы, и пользователь должен прокрутить экран, чтобы увидеть его. Я хочу исправить кнопки, как фиксированный нижний колонтитул.

  <v-card>
    <v-card-title primary-title class="title">Registrar pagamento de mensalidade</v-card-title>

    <v-layout row class="pa-10">
      <v-flex xs12>
        <v-radio-group v-model="paymentType" row>
          <v-radio :label="getCurrentMonthText()"></v-radio>
        </v-radio-group>
      </v-flex>
      <v-row>
        <v-col width="auto">
          <v-text-field
            v-money="money"
            v-model="transaction.value"
            label="Valor R$"
            prepend-icon="attach_money"
          />
          <v-text-field
            readonly
            label="Data"
            v-model="localeDate"
            prepend-icon="calendar_today"
          />
          <div>
            <v-file-input
              label="Foto do comprovante"
              prepend-icon="mdi-camera"
              type="file"
              @click:clear="onClearFile"
              @change="onFileSelected"
              accept="image/*"
            />
          </div>
          <v-img
            v-if="imageReceipt.urlFile != ''"
            :src="imageReceipt.urlFile"
            max-height="300px"
            max-width="300px"
          ></v-img>
        </v-col>
      </v-row>
    </v-layout>

    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn raised absolute left color="blue" class="white--text" @click="savePayment()">Salvar</v-btn>
      <v-btn
        raised
        color="red"
        @click="$emit('hidePayMonthlyDialog')"
        class="white--text"
      >Cancelar</v-btn>
    </v-card-actions>
  </v-card>

Текущее поведение:

enter image description here

Бонус: Как мне расположить кнопки, чтобы разделить всю ширину vue пробел?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...