使用 vuetify 确定不同屏幕尺寸的不同布局

Question

我有一个 vue.js 应用程序，我正在使用 vuetify。我有一个看起来像这样的表：

当我缩小视口的宽度时，它最终看起来像这样：

我不喜欢这种观点。我希望将下拉列表推到行描述下方，并使复选框与其他行上的复选框保持对齐，如下所示：

问题是每行中项目的顺序如下：描述、下拉列表（如果适用于行）、复选框 1、复选框 2、复选框 3。我可以看到下拉列表低于描述的唯一方法是如果它放在行的末尾。但这可以在特定屏幕宽度以下使用 CSS 来完成吗？

这是我的代码：

<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 sm6 :class="item.hasDropdown ? 'md5' : 'md9'"><p class="pt-3 pb-3 font-weight-medium">{{item.description}}</p></v-flex>
                    <v-flex md4 v-if="item.hasDropdown">
                      <v-select :items="dropdownOptions" v-model="dropdownSelection" outline label="dropdown" class="d-inline-block"></v-select>
                    </v-flex>
                    <v-flex xs4 sm2 md1><label class="hidden-sm-and-up">Col 1:</label><v-checkbox v-model="item.col1" class="checkbox"></v-checkbox></v-flex>
                    <v-flex xs4 sm2 md1><label class="hidden-sm-and-up">Col 2:</label><v-checkbox v-model="item.col2" class="checkbox"></v-checkbox></v-flex>
                    <v-flex xs4 sm2 md1><label class="hidden-sm-and-up">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>

您会注意到我正在使用 vuetify 的 flex 类，例如 sm2、md1、sm2 等。这些对于调整不同屏幕尺寸上的列数非常有用，但是在 vuetify 中是否有类似的东西来确定不同的布局基于不同的屏幕尺寸？

Answer 1

您可以为此目的使用order classes。只需根据您的需要添加 order-lg/order-md 等。在您的示例中，我使用的是order-md。根据您的需要进行定制。以下是我的做法：

1. 你必须使用v-col，而不是v-flex
2. 对于网格使用md=9 样式而不是md9
3. 您的页面必须在根级别有v-app，否则这将不起作用。

.......................

<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-col xs=12 sm=6 :md="item.hasDropdown ? '5' : '9'"><p class="pt-3 pb-3 font-weight-medium">{{item.description}}</p></v-col>
                <v-col xs=4 sm=2 md=1 order-md="2"><label class="hidden-sm-and-up">Col 1:</label><v-checkbox v-model="item.col1" class="checkbox"></v-checkbox></v-col>
                <v-col xs=4 sm=2 md=1 order-md="2"><label class="hidden-sm-and-up">Col 2:</label><v-checkbox v-model="item.col2" class="checkbox"></v-checkbox></v-col>
                <v-col xs=4 sm=2 md=1 order-md="2"><label class="hidden-sm-and-up">Col 3:</label><v-checkbox v-model="item.col3" class="checkbox"></v-checkbox></v-col>
                <v-col md=4 v-if="item.hasDropdown" order-md="1">
                  <v-select :items="dropdownOptions" v-model="dropdownSelection" outline label="dropdown" class="d-inline-block"></v-select>
                </v-col>
            </v-layout>
        </v-container>
        <v-divider v-if="index < items.length - 1"></v-divider>
    </v-card>
  </v-form>
</v-card>

解决方案 2 解决方案 1 更像是 vuetifyish 的排序方式。对于普通的 css 方式：

<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 sm6 :class="item.hasDropdown ? 'md5' : 'md9'"><p class="pt-3 pb-3 font-weight-medium">{{item.description}}</p></v-flex>
                <v-flex md4 v-if="item.hasDropdown" class="v-select">
                  <v-select :items="dropdownOptions" v-model="dropdownSelection" outline label="dropdown" class="d-inline-block"></v-select>
                </v-flex>
                <v-flex xs4 sm2 md1 class="v-chkbox"><label class="hidden-sm-and-up">Col 1:</label><v-checkbox v-model="item.col1" class="checkbox"></v-checkbox></v-flex>
                <v-flex xs4 sm2 md1 class="v-chkbox"><label class="hidden-sm-and-up">Col 2:</label><v-checkbox v-model="item.col2" class="checkbox"></v-checkbox></v-flex>
                <v-flex xs4 sm2 md1 class="v-chkbox"><label class="hidden-sm-and-up">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>

这是 CSS：

.v-chkbox {
  order: 1;
}
.v-select {
  order: 2;
}

*不要忘记我没有添加的媒体查询。

** 要了解有关 CSS 排序的更多信息，请查看 MDN 和 CSS Tricks 链接。

干杯:)