Affix

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

В Element Plus компонент реализован через директиву el-affix и предоставляет высокую степень контроля над поведением закрепления.

Использование Affix

Базовый синтаксис выглядит следующим образом:

<template>
  <el-affix :offset-top="50">
    <el-button type="primary">Закреплённая кнопка</el-button>
  </el-affix>
</template>

<script>
export default {
  data() {
    return {
      offsetTop: 50
    };
  }
};
</script>

Пояснение ключевых параметров:

  • offset-top — расстояние от верхней границы окна до закреплённого элемента. Элемент будет фиксироваться, когда прокрутка достигнет этой величины.
  • offset-bottom — альтернативный параметр, позволяющий закреплять элемент снизу экрана.
  • target — задаёт область, внутри которой будет работать закрепление. По умолчанию используется window, но можно привязать к конкретному блоку с прокруткой.

Управление событиями

Компонент Affix предоставляет события для отслеживания изменений состояния закрепления:

<el-affix
  :offset-top="100"
  @change="handleAffixChange"
>
  <el-button>Кнопка с событиями</el-button>
</el-affix>

<script>
export default {
  methods: {
    handleAffixChange(isAffixed) {
      console.log('Закрепление изменилось:', isAffixed);
    }
  }
};
</script>
  • change — вызывается при закреплении или отпускании элемента. Аргумент isAffixed принимает значение true, если элемент закреплён, и false, если нет.

Работа с динамическими размерами

Affix корректно реагирует на изменение размеров окна и содержимого. Чтобы обеспечить точное позиционирование при изменении контента внутри закреплённого блока, рекомендуется использовать комбинацию с watch:

<el-affix :offset-top="topValue" ref="affix">
  <el-card>Динамический контент</el-card>
</el-affix>

<script>
export default {
  data() {
    return {
      topValue: 20
    };
  },
  mounted() {
    window.addEventListener('resize', this.updateAffix);
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.updateAffix);
  },
  methods: {
    updateAffix() {
      this.$refs.affix.updatePosition();
    }
  }
};
</script>

Метод updatePosition() позволяет вручную пересчитать положение закреплённого элемента при изменении размеров контейнера или окна.

Интеграция с другими компонентами

Affix часто используется совместно с:

  • el-button — для фиксированных действий (например, кнопка “Наверх” или действия формы).
  • el-tabs — закрепление вкладок при прокрутке длинного контента.
  • el-card — закрепление боковых панелей, меню или фильтров на странице.

Пример закрепления вкладок:

<el-affix :offset-top="0">
  <el-tabs v-model="activeTab">
    <el-tab-pane label="Первая вкладка">Контент 1</el-tab-pane>
    <el-tab-pane label="Вторая вкладка">Контент 2</el-tab-pane>
  </el-tabs>
</el-affix>

Настройка зоны закрепления через target

Можно закрепить элемент относительно определённого блока с прокруткой, а не всей страницы.

<el-affix :offset-top="10" :target="getContainer">
  <el-button>Внутри блока</el-button>
</el-affix>

<script>
export default {
  methods: {
    getContainer() {
      return document.querySelector('.scroll-container');
    }
  }
};
</script>

<style>
.scroll-container {
  height: 400px;
  overflow-y: scroll;
  border: 1px solid #dcdfe6;
  padding: 10px;
}
</style>

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

Советы по использованию

  • Не использовать слишком большие значения offset-top, иначе элемент может никогда не закрепиться.
  • Комбинировать с z-index, если нужно, чтобы элемент был поверх других блоков.
  • Проверять поведение на мобильных устройствах, так как фиксированное позиционирование может влиять на видимость при маленькой высоте экрана.
  • Использовать updatePosition() при динамическом изменении размеров родительских элементов или контента.

Affix в Element Plus — универсальный инструмент для создания закреплённых элементов интерфейса, позволяющий гибко управлять позиционированием, интегрироваться с другими компонентами и обрабатывать события закрепления.

Оглавление