Я хочу изменить компоненты Vue с помощью медиазапросов

Question

В моем App.vue я установил свой шаблон следующим образом

<app-header></app-header>
<router-view></router-view>
<app-footer ></app-footer>

app-header устанавливает компонент заголовка для всех остальных компонентов моего проекта (поэтому мне не нужно повторяться),app-footer делает то же самое, но с общим нижним колонтитулом для всех моих компонентов.

Это прекрасно работает с моим рабочим столом, но для мобильных устройств я бы хотел изменить компонент заголовка на компонент new-header.vue,и я хотел бы избавиться от нижнего колонтитула при использовании мобильного устройства, чтобы оно не использовало экранное пространство.

Как мне этого добиться?Я пытался использовать app-footer {display: none;} в медиа-запросе на App.Vue, но он не работает.

Answer 1

Вы не хотите использовать CSS, чтобы скрыть.Прелесть Vue в том, что в случае с мобильным кодом код вообще не будет сгенерирован.

Используйте директиву v-if и добавьте свойство isMobile к вашим данным, вычисленным, сохраненным,и т. д. Или вызовите метод, чтобы получить его.

<app-footer v-if='!isMobile'></app-footer>

Для заголовка есть 2 способа.Используя элемент component с v-bind:is до swap in the correct one или v-if и v-else

<app-header v-if='!isMobile'></app-header>
<app-header-mobile v-else></app-header-mobile>

Вот официальная ссылка на подход Vue dynamic component.https://vuejs.org/v2/guide/components-dynamic-async.html.

Это будет выглядеть так:

 <component v-bind:is="currentHeaderComponent"></component>

В этом случае вы должны установить currentHeaderComponent в зависимости от ваших условий.

Если вы настаиваете на CSS и медиа-запросах для нижнего колонтитула, установите компонент id или class, и это в вашем CSS

Component

<app-header id='app-header'></app-header>
<router-view></router-view>
<app-footer id='app-footer'></app-footer>

CSS

#app-footer {display: none;}