如何在移動視圖上切換Vue組件的渲染順序？

我有2個Vue組件，將頁面分成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

來源

2017-09-25 adamb

如果不能使用CSS，你可以添加一個條件'v-if'，它檢查媒體查詢並且重新編譯或者返回或 – user2520818

你可以看看Bootstrap網格系統，特別是關於重新排序的部分https://getbootstrap.com/docs/4.0/layout/grid/#reordering –

https://www.w3schools.com/cssref/css3_pr_order。 asp –

這是一個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>

來源

2017-09-25 20:33:06

沒有彈性，你可以用浮漂做到這一點，下面是簡單的例子：

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

來源

2017-09-25 21:58:22 user8672473

您仍然可以使用flex並使用'order'屬性。花車是沒有必要的。 – disinfor

當然，但您可能需要IE9支持 – user8672473

「使用響應式移動設計時」。沒有移動設備有IE。 – disinfor

如何在移動視圖上切換Vue組件的渲染順序？

回答

相關問題