Skip to content

Контейнер страницы. app

Корневой компонент страницы, предоставляет * информацию о настройках UI общих компонтов (иконки, чекбоксы, переключатели) * информацию о размерах скролл-бара * единый механизм блокировки/активации прокрутки страницы * механизм подключения веб-шрифтов * информацию о форматировании вывода дат

Пример использования

<body>
    <div id="app">
        <!-- код страницы -->
    </div>
</body>

Параметры

Данный компонент поддерживает следущие параметры

  • icon-theme - Строка. Название иконочного шрифта. Поддерживается font-awsome 5 версии
  • checkbox-hide-native - Булевый. Отмечает, необходимо ли переключать чекбоксы в режим скрытого нативного элемента и стилизации через css. По-умолчанию true
  • radio-hide-native - Булевый. Отмечает, необходимо ли переключать радио в режим скрытого нативного элемента и стилизации через css. По-умолчанию true
  • date-format-comments - Строка. Формат дат сообщений в коментариях и отзывах. По-умолчанию - yyyy.mm.dd HH:MM
  • date-format - Строка. Формат дат на сайте. По-умолчанию yyyy.mm.dd

Классы компонента

В ходе работы компонента к родительскому элементу(ожидается, что это body, см. ниже) применяются классы

  • app_scroll_lock - произведена блокировка скролла
  • app_scroll_hidden - скролл спрятан. К тегу app должен примениться отступ, равный ширине скроллбара, нивелирующих прыжок контента.

События

Реагирует на события, отправленные через dispatch()

  • lock:scroll - необходимо заблокрировать прокрутку страницы. Если в событие отправлен объект { type: modal }, то скролл будет спрятан
  • unlock:scroll - необходимо разблокировать прокрутку страницы

Треггирит события, отправленные через broadcast()

  • locked:scroll - прокрутка заблокирована, можно запускать код, который требовал блокировки
  • unlocked:scroll - прокрутка разблокирована.

Особенности и что важно помнить

  • Данный компонент обязателен на странице, т.к. явлеятся точкой монтирования экземпляра Vue.
  • Так же ожидается, что компонент явлеятся дочерним элементом body, в противном случае могут быть неожиданные побочные явления.
  • для правильного монтирования компонента обязателено указание id="app", и это должен быть единственный элемент на странице с таким id.