Как установить строку макета в диалоговом окне vuetify? - PullRequest
Новая
       56

Как установить строку макета в диалоговом окне vuetify?

0 голосов
/ 13 октября 2019

У меня проблема с макетом. Посмотрите на это:

https://codepen.io/positivethinking639/pen/YzzwYZq.

, когда диалоговое окно появляется, это выглядит странно. потому что ширина row(<v-row justify="center">) больше ширины dialog. поэтому, когда модальное диалоговое окно появляется, как будто есть 2 тени.

Я хочу, чтобы ширина строки (<v-row justify="center">) была такой же, как ширина диалога

Я попробовал. Но я не нашел решения. надеюсь, кто-то поможет

Ответы [ 2 ]

0 голосов
/ 13 октября 2019

используйте v-card на v-col 

<div id="app">
    <v-app>
      <v-content>
        <v-container>
          <v-dialog
            v-for="foo, k in foos"
            :key="foo.id"
            :close-on-content-click="false"
            transition="scale-transition"
            :return-value.sync="foo.date"
            max-width="500px"
            min-width="500px"
            v-model="modal[k]"
            :ref="'dialog' + k"
          >
            <template v-slot:activator="{ on }">
              <v-btn color="success" dark v-on="on">call date {{foo.id}} {{ foo.date }}</v-btn>
            </template>
            <v-card class="py-2">
              <v-card-text>
                <v-row justify="center" no-gutters align-content="center">
                  <v-col md="auto" justify-self="center">
                    <v-date-picker v-model="foo.date" @input="changeHours">
                      <div class="flex-grow-1"></div>
                      <v-btn text color="primary" @click="modal[k] = false">Cancel</v-btn>
                      <v-btn text color="primary" @click="$refs['dialog' + k][0].save(foo.date)">OK</v-btn>
                    </v-date-picker>
                  </v-col>
                  <v-slide-y-transition>
                    <v-col
                      sm="3"
                      xs="12"
                      v-show="foo.date !== null"
                      :style="{'background-color':'white'}"
                    >
                      <template v-for="allowedTime in allowedTimes">
                        <v-btn
                          @click="setTime(allowedTime)"
                          class="my-2"
                          :outlined="allowedTime !== time"
                          block
                          x-large
                          color="primary"
                        >{{ allowedTime }}</v-btn>
                      </template>
                    </v-col>
                  </v-slide-y-transition>
                </v-row>
              </v-card-text>
            </v-card>
          </v-dialog>
        </v-container>
      </v-content>
    </v-app>
  </div>
0 голосов
/ 13 октября 2019

установите в вашем диалоговом окне автоматическую ширину 

.v-dialog {
 width:unset;
}

используйте без строк в вашей строке 

<v-row no-gutters justify="center">

добавьте заполнение x в правый столбец и удалите атрибут row=2 

<v-col class='px-3' v-show="foo.date !== null"
...