如何在移动视图上切换 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 属性来更改顺序。

下面的示例将在显示宽度介于 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>