Скрытие компонентов

Element Plus предоставляет гибкие инструменты для контроля отображения компонентов на странице. Основными способами управления являются использование директив v-if, v-show и свойств компонентов, обеспечивающих условное рендеринг и динамическое управление интерфейсом.

Директива v-if для условного рендеринга

v-if полностью добавляет или удаляет компонент из DOM в зависимости от логического выражения. Это эффективный способ, когда необходимо полностью исключить компонент из дерева элементов при определённых условиях.

<template>
  <el-button v-if="isVisible" type="primary">Нажми меня</el-button>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

Особенности v-if:

  • Компонент создаётся только при истинном значении выражения.
  • Полностью уничтожается при false, включая внутренние состояния и слушатели событий.
  • Подходит для редких изменений видимости, так как повторное создание компонента требует дополнительных ресурсов.

Директива v-show для скрытия через CSS

v-show изменяет только свойство CSS display, оставляя компонент в DOM.

<template>
  <el-dialog v-show="dialogVisible" title="Диалог">
    Содержимое диалога
  </el-dialog>
  <el-button @click="dialogVisible = !dialogVisible">Показать/Скрыть</el-button>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  }
};
</script>

Преимущества v-show:

  • Быстрое переключение видимости.
  • Состояние компонента сохраняется при скрытии.
  • Оптимально для частых изменений видимости, например, вкладки, всплывающие окна, элементы меню.

Недостаток: компонент всегда присутствует в DOM, что может повлиять на производительность при большом количестве элементов.

Управление видимостью через свойства компонентов

Многие компоненты Element Plus имеют собственные свойства для управления отображением, которые предоставляют более интуитивное управление:

  1. el-dialog — :visible.sync

    <el-dialog :visible.sync="dialogVisible" title="Диалог">
  Содержимое
</el-dialog>

    При изменении dialogVisible автоматически открывается или закрывается диалог.

  2. el-popover — v-model:visible

    <el-popover v-model:visible="popoverVisible" title="Подсказка">
  Подсказка контента
</el-popover>

  3. el-tooltip — :visible

    <el-tooltip content="Информация" :visible="tooltipVisible">
  <el-button>Наведи на меня</el-button>
</el-tooltip>

Использование встроенных свойств позволяет интегрировать компонент с реактивной логикой Vue и управлять состоянием без прямого вмешательства в DOM.

Динамическое создание компонентов с v-for и условием

Комбинация v-for и v-if позволяет управлять видимостью множества компонентов одновременно:

<template>
  <el-card
    v-for="item in items"
    v-if="item.visible"
    :key="item.id"
    class="box-card">
    {{ item.content }}
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, content: 'Первый', visible: true },
        { id: 2, content: 'Второй', visible: false }
      ]
    };
  }
};
</script>

Рекомендации:

  • Для большого числа элементов предпочтительно использовать v-show, чтобы уменьшить частое создание и уничтожение компонентов.
  • Если элементы редко появляются или исчезают, v-if обеспечивает чистоту DOM и экономию ресурсов.

Управление видимостью через слоты и условные рендеры

Element Plus активно использует слоты для составных компонентов. С помощью директив можно условно рендерить содержимое слота:

<el-card>
  <template v-if="showHeader" #header>
    Заголовок карты
  </template>
  Контент карты
</el-card>

Преимущества такого подхода:

  • Позволяет скрывать только часть компонента, не затрагивая основной каркас.
  • Упрощает управление сложными интерфейсами, где отдельные элементы могут быть динамически скрыты.

Анимации при скрытии компонентов

Для плавного исчезновения компонентов можно использовать <transition>:

<template>
  <transition name="fade">
    <el-alert v-if="showAlert" title="Внимание!" type="warning"></el-alert>
  </transition>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

Особенности:

  • Позволяет визуально улучшить UX при открытии и закрытии элементов.
  • Работает как с v-if, так и с v-show.

Управление видимостью через реактивные данные

Element Plus идеально интегрируется с реактивными объектами Vue. Состояние видимости можно хранить в ref или reactive:

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

const isVisible = ref(false);

function toggle() {
  isVisible.value = !isVisible.value;
}
</script>

<template>
  <el-button @click="toggle">Переключить</el-button>
  <el-alert v-if="isVisible" title="Сообщение"></el-alert>
</template>

Это обеспечивает централизованный контроль видимости через реактивную систему Vue без необходимости напрямую управлять свойствами DOM.

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

Оглавление