Как применять d-flex только для определенных размеров экрана в Vuetify - PullRequest
Новая
       6

Как применять d-flex только для определенных размеров экрана в Vuetify

0 голосов
/ 17 февраля 2020

У меня есть приложение vue. js, использующее Vuetify. У меня есть таблица, которая выглядит следующим образом:

enter image description here

Вот код для этого: 

<v-card class="mb-3 px-3">
  <v-card-title class="px-0">
      <div class="headline">Items</div> 
  </v-card-title>
  <v-container fluid pa-0>
  <v-layout row wrap py-3>
      <v-flex xs9 sm6 md9>
          <v-label>Item</v-label>
      </v-flex>
      <v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 1</v-label></v-flex>
      <v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 2</v-label></v-flex>
      <v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 3</v-label></v-flex>
  </v-layout>
  <v-divider></v-divider>
  </v-container>
  <v-form>
    <v-card v-for="(item, index) in items" :key="index" :id="'index-' + index" flat>
            <v-container fluid pa-0>
                <v-layout row wrap align-center style="min-height: 80px;">
                    <v-flex xs12 sm9><p class="pt-3 pb-3 font-weight-medium">row {{index+1}}</p></v-flex>
                    <v-flex xs4 sm2 md1 class="checkbox-order"><label class="hidden-sm-and-up" style="width: 0;">Col 1:</label><v-checkbox v-model="item.col1" class="checkbox"></v-checkbox></v-flex>
                    <v-flex xs4 sm2 md1 class="checkbox-order"><label class="hidden-sm-and-up" style="width: 0;">Col 2:</label><v-checkbox v-model="item.col2" class="checkbox"></v-checkbox></v-flex>
                    <v-flex xs4 sm2 md1 class="checkbox-order"><label class="hidden-sm-and-up" style="width: 0;">Col 3:</label><v-checkbox v-model="item.col3" class="checkbox"></v-checkbox></v-flex>
                </v-layout>
            </v-container>
        <v-divider v-if="index < items.length - 1"></v-divider>
    </v-card>
  </v-form>
</v-card>

Когда я уменьшаю страница размером менее 600 пикселей выглядит следующим образом:

enter image description here

Мы пытаемся здесь взять заголовки столбцов и преобразовать их на ярлыки слева от каждого флажка. Вот тут и вступает в игру 

<label class="hidden-sm-and-up">

.

Мне не понравилось, как метка и флажок не совмещены. Исследуя это, я обнаружил, что это потому, что метка и флажок выровнены в виде столбцов с меткой сверху (и выровненным по левому краю) и флажком снизу (по центру по центру). Чтобы исправить это, я добавил d-flex к v-flex каждого столбца: 

                    <v-flex xs4 sm2 md1 d-flex class="checkbox-order"><label class="hidden-sm-and-up" style="width: 0;">Col 1:</label><v-checkbox v-model="item.col1" class="checkbox"></v-checkbox></v-flex>
                    <v-flex xs4 sm2 md1 d-flex class="checkbox-order"><label class="hidden-sm-and-up" style="width: 0;">Col 2:</label><v-checkbox v-model="item.col2" class="checkbox"></v-checkbox></v-flex>
                    <v-flex xs4 sm2 md1 d-flex class="checkbox-order"><label class="hidden-sm-and-up" style="width: 0;">Col 3:</label><v-checkbox v-model="item.col3" class="checkbox"></v-checkbox></v-flex>

Это решило проблему для носителей менее 600 пикселей:

enter image description here

Однако, когда я возвращаю экран выше 600px, он теперь выглядит так:

enter image description here

Флажки нет длиннее по центру под заголовками столбцов. Я не знаю, как снова расположить их по центру.

Мне интересно, есть ли способ заставить его применять класс d-flex только тогда, когда экран меньше 600 пикселей. Я знаю, как применять различные классы с помощью v-if, но я не знаю, как проверить размер экрана с помощью v-if. Я также знаю, как применять разные стили к медиазапросам, но это работает только для стилей в одном классе, но не для применения совершенно разных классов.

Кто-нибудь знает, как применять класс d-flex только тогда, когда Размер экрана меньше 600 пикселей? Спасибо.

...