Скрытие элементов на разных экранах

Element Plus предоставляет гибкие средства для адаптивного управления интерфейсом, включая условное отображение компонентов на разных размерах экранов. Основным инструментом для этого является система утилитарных классов и директив, а также возможности Vue для реактивного контроля видимости.

Утилитарные классы для адаптивного скрытия

В Element Plus встроены специальные CSS-классы, которые позволяют скрывать элементы в зависимости от ширины экрана:

  • el-hidden-xs – скрывает элемент на экранах <576px
  • el-hidden-sm – скрывает элемент на экранах ≥576px и <768px
  • el-hidden-md – скрывает элемент на экранах ≥768px и <992px
  • el-hidden-lg – скрывает элемент на экранах ≥992px и <1200px
  • el-hidden-xl – скрывает элемент на экранах ≥1200px

Применение этих классов не требует написания дополнительного JavaScript-кода:

<el-button class="el-hidden-sm el-hidden-md">Кнопка только для больших экранов</el-button>

В данном примере кнопка будет видна только на экранах ≥992px.

Динамическое управление через Vue

Для более гибкого контроля часто используют реактивные свойства Vue и директиву v-show или v-if. Разница между ними:

  • v-show – скрывает элемент через CSS display: none, элемент присутствует в DOM.
  • v-if – полностью удаляет элемент из DOM, экономит ресурсы при сложных компонентах.

Пример динамического скрытия элемента на основе ширины окна:

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

const isMobile = ref(window.innerWidth < 768);

function handleResize() {
  isMobile.value = window.innerWidth < 768;
}

onMounted(() => {
  window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
});
</script>

<template>
  <el-alert v-if="!isMobile" title="Этот алерт не показывается на мобильных устройствах" type="info" />
</template>

В этом примере компонент el-alert будет скрыт на экранах шириной меньше 768px.

Использование слотов для адаптивного контента

Для сложных компонентов, таких как el-table, el-card или el-form, часто требуется показывать разные элементы в зависимости от устройства. Здесь удобно использовать слоты и условный рендеринг:

<el-card>
  <template #header>
    <h3 v-if="!isMobile">Полная шапка для десктопа</h3>
    <h3 v-else>Короткая шапка для мобильных</h3>
  </template>
  <p>Содержимое карточки</p>
</el-card>

Такой подход позволяет создавать полностью адаптивный интерфейс без дублирования компонентов.

Комбинирование классов и реактивных свойств

Для сложных интерфейсов часто используется сочетание утилитарных классов Element Plus и реактивного управления через Vue:

<el-row>
  <el-col :span="12" class="el-hidden-xs">
    Контент для планшетов и десктопов
  </el-col>
  <el-col :span="12" v-if="isMobile">
    Контент для мобильных устройств
  </el-col>
</el-row>

Такой подход позволяет максимально эффективно использовать доступное пространство на разных устройствах.

Подключение к медиазапросам

Element Plus утилитарные классы основаны на медиазапросах, но при необходимости можно создавать свои кастомные правила через SCSS или CSS:

@media (max-width: 600px) {
  .custom-hidden {
    display: none;
  }
}

И применять их к любым компонентам Element Plus:

<el-button class="custom-hidden">Скрытая кнопка на узких экранах</el-button>

Это расширяет стандартные возможности библиотеки и позволяет адаптировать интерфейс под специфические задачи.

Итоговые рекомендации по скрытию элементов

  • Для простых случаев достаточно использовать утилитарные классы el-hidden-*.
  • Для динамического контроля и сложной логики лучше использовать реактивные свойства Vue и v-if / v-show.
  • Комбинация классов и реактивного рендеринга обеспечивает максимальную гибкость.
  • Для кастомных точек разрыва используйте медиазапросы CSS/SCSS, интегрированные с компонентами Element Plus.

Такой подход гарантирует, что интерфейс будет адаптивным, отзывчивым и легко поддерживаемым, независимо от размера экрана.

Оглавление