preface
I’ve seen a lot of libraries before, but their Popup behavior is not very different from the native interface, but the behavior is not very detailed, so I have this Popup component that emphasizes the standard behavior
The characteristics of
- support
Return key, popup can be turned off by pressing the browser’s Back button - You can write small complicated ones
Excessive animation, such as the tile press effect [available on popUpMenu] - Support CSS animation libraries, such as animation. CSS, and add your own dependencies when using them
- Popup provides several good popup components, Calendar, Picker, and imgViewer
Behavior definitions are relatively standardFor example, popup intercepts input events after a close is triggered, but before the end animation is finished. Popup belongs toNon-interactivestate- It is easy to expand, and we will add the tutorial written by Popup
- Oh, by the way, powerfulPositioning support, there are
In the middle.clickRelative.domRelative, includingdomRelativeSupports 25 locations LayerAll of them are optimized, the layers are reasonable, and there is no compressed layer, or layer explosion- USES a
Absolute top strategyThat is, even within the page element Settingsfixed+z-index:99999999999;, will not cover the popuppopup
The online preview
Component address: https://github.com/deepkolos/vc-popup
The definition of front-end behavior is just as important as the input definition of the algorithm
11/28 update
- Optimized the template rendering strategy for Calendar component initialization to eliminate the peak rendering. With CPU X 6 Slowdown, you can see the comparison below
Optimization of 1.2 s
After optimization, 0.4s, 3 times faster
The principle is very simple, is to weaken the template compilation peak, some not immediately need to display the parts can be initialized after the animation is finished
12/08 update
ImgView Supports lazy image loading. The synchronization changes from the preset image loading status to the loaded SRC
