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

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

＆＃13;

.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%;
  }
}

＆＃13;

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

＆＃13;

Answer 3

如果有人使用case class AClass( val a: String, val b: Int )并想更改CaseClass.valList[AClass] = List("a", "b")元素的出现顺序

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

使用如下所示的vuetify来颠倒行顺序v-flex将变成scoped css的顺序：

|A|B|

在Mobile View中，更改列的顺序：

当它们在移动设备中显示时，应使用如下的|B|A|来颠倒顺序：

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

在这里，scoped css可以设置为任何方便的值以满足要求。如果仅在一种布局中需要相反的顺序，而在其他所有情况下则需要常规顺序，则可以在可以应用此自定义样式的组件中分隔特定的布局。

More about Ordering Flex Items

Answer 4

如果您使用 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>

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

4 个答案: