css - 如何在移动 View 上切换 Vue 组件的渲染顺序？

Question

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

<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>