Vuetify обернуть колонну "заливка сеткой" в полный рост

Vuetify обернуть колонну "заливка сеткой" в полный рост

28.01.2020 07:38:19 Просмотров 46 Источник

После создания компонента с помощью v-card в grid system id не заполняется на полную высоту. Я использовал d-flex, однако он не работает, как предполагалось.

Средняя колонка с белой v-картой должна заполнять всю высоту колонки, однако она укладывается сверху. Вот картинка желаемого функционала: enter image description here

И вот код, в Codepen вы можете видеть, что он не распространяется на всю высоту столбца, но вложен в верхней части.

var car = Vue.component('car', {

  template: `
    <div class="car">
         <v-flex d-flex child-flex>
        <v-card >
            <v-card-text>
                <div class="text-center font-weight-black title text--primary">
                    test
                </div>
                <div class="text-center">
                    data
                </div>
            </v-card-text>
        </v-card>
        </v-flex>
    </div>
  `
})

new Vue({
  el: '#app',
  data: () => ({
    lorem: `Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos.`
  }),
  components: {"car":car}
})
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-container fluid grid-list-sm>
      <v-layout row wrap>

        <v-flex d-flex xs12 sm4 child-flex>
          <v-card color="orange lighten-2" tile flat>
            <v-card-text>Card 1</v-card-text>
          </v-card>
        </v-flex>
        
        <v-flex d-flex xs12 sm2>

          <v-layout column wrap>
            <car></car>
            <car></car>
            <car></car>
          </v-layout>
        </v-flex>

        <v-flex d-flex xs12 sm6>
          <v-card color="red lighten-2" dark tile flat>
            <v-card-text>{{ lorem }} {{ lorem }} {{ lorem }} {{ lorem }} {{lorem}}</v-card-text>
          </v-card>
        </v-flex>
   
         <v-flex d-flex xs12 sm4 child-flex>
          <v-card color="purple lighten-1" tile flat>
            <v-card-text>{{lorem}}</v-card-text>
          </v-card>
        </v-flex>
        <v-flex xs12 sm2 child-flex>
          <v-card color="green lighten-2" tile flat>
            <v-card-text>{{lorem}}</v-card-text>
          </v-card>
        </v-flex>
        
        <v-flex d-flex xs12 sm6 child-flex>
          <v-card color="blue lighten-2" tile flat>
            <v-card-text>{{lorem}} {{lorem}}</v-card-text>
          </v-card>
        </v-flex>
       
      </v-layout>
    </v-container>
  </v-app>
</div>

У вопроса есть решение - Посмотреть?

Ответы - Vuetify обернуть колонну "заливка сеткой" в полный рост / Vuetify grid column wrap fill full height

Является ответом!
fabruex

28.01.2020 07:54:23

В вашем carкомпоненте удалите первый div.

var car = Vue.component('car', {
  template: `
     <v-flex d-flex child-flex>
        <v-card >
            <v-card-text>
                <div class="text-center font-weight-black title text--primary">
                    test
                </div>
                <div class="text-center">
                    data
                </div>
            </v-card-text>
        </v-card>
     </v-flex>
  `
})
https://stackoverflow.com/questions/59953246/vuetify-grid-column-wrap-fill-full-height/59953541#comment106032769_59953541
Но div является обязательной частью компонентной конструкции в vue. Когда я удаляю его, то я получаю ошибку
https://stackoverflow.com/questions/59953246/vuetify-grid-column-wrap-fill-full-height/59953541#comment106042246_59953541
@AlexT какая ошибка? Я отредактировал ваш codepen и не получил ни одной ошибки
https://stackoverflow.com/questions/59953246/vuetify-grid-column-wrap-fill-full-height/59953541#comment106043282_59953541
Но в vue.js вам нужно иметь корневой элемент, который является <div>, поэтому он не может быть удален
https://stackoverflow.com/questions/59953246/vuetify-grid-column-wrap-fill-full-height/59953541#comment106043365_59953541
@AlexT нет, вам нужен только один корневой элемент, который может быть html-элементом или компонентом
https://stackoverflow.com/questions/59953246/vuetify-grid-column-wrap-fill-full-height/59953541#comment106043461_59953541
Ну ладно, раньше не получалось, спасибо
Zim

28.01.2020 09:05:42

Вы можете добавить growк внешнему div автомобиля и fill-heightк v-flex...

<div class="car grow">
    <v-flex d-flex child-flex class="fill-height">
      <v-card>
        <v-card-text>
            <div class="text-center font-weight-black title text--primary">
                test
            </div>
            <div class="text-center">
                data
            </div>
        </v-card-text>
      </v-card>
    </v-flex>
</div>

https://codeply.com/p/qOKz9Qsv6L

Закрыть X