如何在移动视图上切换 Vue 组件的渲染顺序？

Question

我有 2 个 Vue 组件，将页面分为 2 个部分。左侧，右侧。我在每个页面上都使用这两个，如下所示：

<template>
  <div class="page-body">
    <left-side>
      <p class="text" >{{ $t('about') }}</p>
    </left-side>
    <right-side>
      <p class="slogen bottom">{{ $t('slogen') }}</p>
    </right-side>
  </div>
</template>

但是有一种特殊情况，当这两个组件应该交换位置时，​​在使用响应式移动设计时，先渲染右侧再渲染左侧。完成这种行为的方法是什么？我正在使用 Vue 2.3.3

Answer 1

这是一个 CSS 问题。将它们放在flexbox 中，并在媒体查询中使用order property 来更改顺序。

当显示宽度在 300 到 600 像素之间时，下面的示例将交换两个颜色区域。

.page-body {
  display: flex;
}

left-side,
right-side {
  background-color: #fdc;
  display: block;
  flex-basis: 50%;
}

right-side {
  background-color: #cdf;
  text-align: right;
}

@media (min-width: 300px) and (max-width: 500px) {
  left-side {
    order: 2;
  }
}

<div class="page-body">
  <left-side>
    <p class="text">{{ $t('about') }}</p>
  </left-side>
  <right-side>
    <p class="slogen bottom">{{ $t('slogen') }}</p>
  </right-side>
</div>

Answer 2

如果您使用 Vuetify，您可以使用 order property 轻松做到这一点：

<v-row>
    <v-col class="col-11 col-md-6" order-md="2">
        <p>On mobile: on the left; otherwise on the right</p>
    </v-col>
    <v-col class="col-11 col-md-6" order-md="1">
        <p>On mobile: on the right; on tablet/desktop(-> md) on the left</p>
    </v-col>
</v-row>

Answer 3

没有 flex，你可以用浮动来实现，这里是一个简短的例子：

.right, .left {
  box-sizing: border-box;
  border: black 1px solid;
  width: 50%;
  height: 130px;
}

.left {
  float: left;
}
.right {
  float: right;
}

@media (max-width: 768px) {
  .left, .right {
    float: none;
    width: 100%;
  }
}

<div class="right">
  second
</div>

<div class="left">
  first
</div>

Answer 4

如果有人使用vuetify并想改变v-flex元素的出现顺序

---

在大显示屏中，即平板电脑到笔记本电脑：

使用像下面这样的scoped css 来颠倒顺序，|A|B| 将变成|B|A|：

.layout.row.wrap {
        flex-direction: row-reverse;
      }

在移动视图中，更改列的顺序：

应该使用scoped css 来颠倒它们在移动设备中显示的顺序：

@media (max-width: 425px) {
  .layout.row.wrap {
    flex-direction: column-reverse;
  }
}

在这里，max-width 可以设置为任何方便的值以满足要求。如果仅在一种布局中需要反向排序，而在所有其他情况下需要正常排序，则可以将特定布局分离到可以应用此自定义样式的组件中。

More about Ordering Flex Items