Фиксированное окно

Основное использование

Компонент FixWindow предназначен для прикрепления к родительскому элементу и динамической настройки своей позиции. Он использует либо fixed, либо absolute CSS позиционирование в зависимости от конфигурации. Окно автоматически перепозиционирует себя, чтобы оставаться в пределах видимых границ экрана.

<template>
  <div>
    Наведи на меня
    <FixWindow>Это динамическое окно!</FixWindow>
  </div>
</template>

В этом примере FixWindow появляется, когда вы наводите курсор на кнопку.

Значение модели

Prop modelValue управляет видимостью FixWindow. Когда true, FixWindow отображается; когда false, он скрывается. Этот prop полезен для программного управления видимостью окна.

<FixWindow v-model="isVisible">
  Это окно управляется программно.
</FixWindow>

Тип позиции

Prop typePosition определяет, использует ли FixWindow absolute или fixed CSS позиционирование.

• absolute: Позиционирует FixWindow относительно ближайшего позиционированного предка.
• fixed: Позиционирует FixWindow относительно viewport.

<template>
  <Button>
    Фиксированная позиция
    <FixWindow typePosition="fixed">
      ...
    </FixWindow>
  </Button>
</template>

Позиционирование

Позиция FixWindow может контролироваться с помощью prop position. Доступные варианты включают top, bottom, left, right и комбинации, такие как bottom-right.

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

<template>
  <div>
    Нижний правый угол
    <FixWindow position="bottom-right">
      Окно в правом нижнем углу
    </FixWindow>
  </div>
</template>

События триггеров

FixWindow может быть настроен для открытия и закрытия на основе определенных взаимодействий пользователя. Вот разбор поддерживаемых событий:

Наведение

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

<template>
  <div>
    Наведи на меня
    <FixWindow eventOpen="hover" eventClose="hover">
      Открыто при наведении
    </FixWindow>
  </div>
</template>

Клик

Открывается, когда пользователь кликает на родительский элемент, и закрывается при следующем клике.

<template>
  <div>
    Кликни на меня
    <FixWindow eventOpen="click" eventClose="click">
      Открыто при клике
    </FixWindow>
  </div>
</template>

Двойной клик

Открывается, когда пользователь дважды кликает на родительский элемент, и закрывается при следующем двойном клике.

<template>
  <div>
    Дважды кликни на меня
    <FixWindow eventOpen="dblclick" eventClose="dblclick">
      Открыто при двойном клике
    </FixWindow>
  </div>
</template>

Нажатие мыши

Открывается, когда пользователь нажимает кнопку мыши, и закрывается при отпускании кнопки.

<template>
  <div>
    Нажми мышь
    <FixWindow eventOpen="mousedown" eventClose="mouseup">
      Открыто при нажатии мыши
    </FixWindow>
  </div>
</template>

Отпускание мыши

Открывается, когда пользователь отпускает кнопку мыши, и закрывается при клике в другом месте.

<template>
  <div>
    Отпусти мышь
    <FixWindow eventOpen="mouseup" eventClose="click">
      Открыто при отпускании мыши
    </FixWindow>
  </div>
</template>

Контекстное меню

Открывается, когда пользователь кликает правой кнопкой мыши на родительский элемент.

<template>
  <div>
    Кликни правой кнопкой на меня
    <FixWindow eventOpen="contextmenu" eventClose="click">
      Открыто при клике правой кнопкой
    </FixWindow>
  </div>
</template>

Нет

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

<template>
  <div>
    Ручное управление
    <FixWindow eventOpen="none" closeButton>
      Управляется вручную
    </FixWindow>
  </div>
</template>

Элемент

Prop el указывает целевой элемент, с которым должно выравниваться FixWindow. По умолчанию FixWindow выравнивается с родительским элементом, но вы можете использовать этот prop для явного указания цели.

<template>
  <Button id="target-element">
    Наведи на меня
  </Button>
  <FixWindow :el="'#target-element'">
    Это окно выравнивается по кнопке.
  </FixWindow>
</template>

Прокручиваемый элемент

Prop scrollableEl определяет прокручиваемый элемент, который влияет на позицию FixWindow. Это гарантирует, что FixWindow динамически корректирует свою позицию при прокрутке элемента.

<template>
  <div id="scrollable-container" style="overflow: auto;">
    <Button>
      FixWindow, зависящий от прокрутки
      <FixWindow :scrollableEl="'#scrollable-container'">
        Это окно корректируется при прокрутке.
      </FixWindow>
    </Button>
  </div>
</template>

Задержка

Prop delay вводит задержку (в миллисекундах) перед открытием FixWindow после триггерного события. Это полезно для предотвращения случайных открытий.

<template>
  <Button>
    Задержанное окно
    <FixWindow delay="500">
      Окно открывается через 500 мс.
    </FixWindow>
  </Button>
</template>

Отступ в пикселях

Prop marginPx устанавливает отступ (в пикселях) между FixWindow и его родительским элементом.

<template>
  <Button>
    Пример отступа
    <FixWindow :marginPx="10">
      Отступ 10px от родительского элемента.
    </FixWindow>
  </Button>
</template>

Смещение в пикселях

Prop translatePx точно настраивает позицию FixWindow, смещая его по осям x или y (в пикселях).

<template>
  <Button>
    Смещенное окно
    <FixWindow translatePx="15">
      Окно смещено на 15px.
    </FixWindow>
  </Button>
</template>

Отступ окна

Prop paddingWindow добавляет отступ вокруг FixWindow, чтобы предотвратить его слишком близкое расположение к краям экрана.

<template>
  <Button>
    Окно с отступом
    <FixWindow paddingWindow="20">
      Отступ 20px от краев экрана.
    </FixWindow>
  </Button>
</template>

По курсору

Prop byCursor позиционирует FixWindow относительно положения курсора. Это особенно полезно для контекстных меню или подсказок, которые должны следовать за действиями пользователя.

<template>
  <div>
    Кликни здесь правой кнопкой.
    <FixWindow byCursor eventOpen="contextmenu">
      Окно отображается в месте расположения курсора.
    </FixWindow>
  </div>
</template>

Кнопка закрытия

Вы можете включить кнопку закрытия внутри FixWindow, установив prop closeButton в значение true. Это особенно полезно, когда prop eventClose установлен в none, так как это предоставляет пользователям способ закрыть окно.

Нажми меня

<template>
  <div>
    Закрой меня
    <FixWindow closeButton>
      ...
    </FixWindow>
  </div>
</template>

Стили

Режим

Prop mode позволяет контролировать общий вид FixWindow. Доступные варианты включают:

• filled: Добавляет цвет фона и закругленные углы.
• outlined: Добавляет границу без фона.
• underlined: Добавляет тонкую подчеркивающую линию.

<template>
  <div>
    Стилизованное окно
    <FixWindow mode="outlined">
      Окно в режиме outlined
    </FixWindow>
  </div>
</template>

Пользовательский класс

Вы можете применить пользовательские стили к FixWindow с помощью prop class. Это позволяет переопределить или добавить дополнительные стили к контейнеру.

<template>
  <Button>
    Пользовательский класс
    <FixWindow class="custom-class">
      Окно с пользовательским стилем
    </FixWindow>
  </Button>
</template>

Класс тела

Для более детального контроля вы можете стилизовать область содержимого внутри FixWindow с помощью prop classBody.

<template>
  <Button>
    Пользовательский класс тела
    <FixWindow classBody="custom-body-class">
      Окно с пользовательским стилем тела
    </FixWindow>
  </Button>
</template>

Предотвращение распространения события

Prop stopOpenPropagation останавливает распространение события открытия (например, click, hover и т.д.) на родительские элементы. Это полезно в случаях, когда FixWindow находится внутри компонента, который имеет свои собственные обработчики событий.

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

<template>
  <Button>
    Остановить распространение
    <FixWindow eventOpen="click" stopOpenPropagation>
      Распространение события остановлено
    </FixWindow>
  </Button>
</template>