Поведенческий стандартный компонент всплывающего окна (vue), мощная поддержка анимации и поддержка позиционирования

JavaScript Vue.js HTML CSS

предисловие

Я видел много библиотек компонентов раньше, но их поведение Popup мало чем отличается от нативного интерфейса, но в поведении не хватает разных мелких деталей, поэтому такой акцентстандарт поведениявсплывающий компонент

Функции

  1. служба поддержки返回键, вы можете нажать кнопку возврата браузера, чтобы закрыть всплывающее окно
  2. можно написать небольшой комплекс过度动画, такие как эффект нажатия плитки [можно увидеть в popUpMenu]
  3. Поддержка библиотеки анимации css, например, animation.css, просто добавляйте зависимости при ее использовании.
  4. Предоставляет несколько хороших всплывающих компонентов, календарь, средство выбора, imgViewer.
  5. 行为定义相对标准, Это более важно, определение внешнего интерфейса совпадает с входным определением алгоритма.Например, после закрытия триггера, до окончания конечной анимации, всплывающее окно перехватит входное событие, и всплывающее окно принадлежит к不可交互状态
  6. Расширяться удобнее~, а туториал, написанный попапом, будет дополняться позже~
  7. чуть не забыл упомянуть, мощныйПоддержка позиционирования, имеют居中, clickRelative, domRelative, вdomRelative25 поддерживаемых позиций
  8. LayerВсе было оптимизировано, слои разумны~, нет слоя сжатия или взрыва слоя.
  9. используется绝对的置顶策略, то есть даже если элемент установлен на страницеfixed+z-index:99999999999;, не будет закрывать всплывающее окноpopup

онлайн предварительный просмотр

Адрес компонента: https://github.com/deepkolos/vc-popup

Поведение в переднем углу определяется как будто вход такой же важен, как определение алгоритма, я надеюсь, что больше о поведении передней части, определяемой статьей

Обновление от 28 ноября

  1. Оптимизирована стратегия рендеринга шаблона для инициализации компонента календаря для устранения пика рендеринга Эффект от использования замедления ЦП x 6 в хроме следующий

До оптимизации1.2s

Оптимизировано0.4s, в 3 раза быстрее

Принцип прост, онОслабление пиков компиляции шаблонаТо есть некоторые части, которые не отображаются сразу, могут быть инициализированы после окончания анимации.

08.12 Обновление

imgView поддерживает ленивую загрузку картинок, от предустановленной картинки в состоянии загрузки до синхронной смены загруженного src~

Категории