Summary of vue. js pop-up components

Recently, I had some feelings about componentized development during the development process, so I began to record these ideas. Pop-up window components have always been essential for web development and are frequently used. The most common ones are alert, confirm, and prompt. Different Component Libraries have different processing methods for pop-up windows, let's take a look. First, consider the following three points during development:

1. Enter and pop-up animation effects.

2. z-index Control

3. overlay

About Animation

Vue is relatively simple in animation processing. Just add a css transition animation to the component.

 
  
 
   
 Script //... script

Users can control the external display by using v-if or v-show.

Z-index Control

To control the z-index, perform the following steps:
1. Make sure that the z-index in the pop-up box is high enough to make it the outermost layer.

2. the z-index in the pop-up box is higher than that in the previous pop-up box.

To meet the preceding requirements, we need to implement the following code:

Const zIndex = 20141223 // pre-set a high value const getZIndex = function () {return zIndex ++ // zindex is automatically added after each acquisition}

Then bind the z-index to the component.

 
  
 
   
 Script export default {data () {return {zIndex: getZIndex () }} script

Overlay Layer Control

The covering layer is the most difficult part of the pop-up window component. The following points need to be completed for a perfect covering layer control:

1. The animation between the covering layer and the pop-up layer must be parallel.

2. the z-index of the covering layer is smaller than that of the pop-up layer.

3. Components Page scrolling is required when the covering layer is popped up.

4. You need to give feedback to the pop-up layer when you click the cover layer.

5. Ensure that the entire page can have at most one covering layer (multiple overlapping layers will deepen the color of the covering layer)

In order to solve these problems, we also ensure that all the pop-up box components do not need to be resolved. Therefore, we decided to use the mixins mechanism of vue to encapsulate the public logic of these pop-up layers into a mixin layer, directly reference each component in the pop-up box.

Vue-popup-mixin

After clarifying all the above problems, we need an overlay (covering layer component) to start developing mixin );

  
  

 《script》export default { props: { onClick: {  type: Function }, opacity: {  type: Number,  default: 0.4 }, color: {  type: String,  default: '#000' } }, computed: { style () {  return {  'opacity': this.opacity,  'background-color': this.color  } } }, methods: { prevent (event) {  event.preventDefault()  event.stopPropagation() }, handlerClick () {  if (this.onClick) {  this.onClick()  } } }}《script》

Then a js is required to manage the overlay display and hide.

Import Vue from 'vue 'import overlayOpt from '.. /overlay '// introduce the overlay component const Overlay = Vue. extend (overlayOpt) const getDOM = function (dom) {if (dom. nodeType = 3) {dom = dom. nextElementSibling | dom. nextSibling getDOM (dom)} return dom} // z-index Control const zIndex = 20141223 const getZIndex = function () {return zIndex ++} // manage const PopupManager = {instances: [], // used to store all the pop-up layer instances overlay: fals E, // call this method open (instance) {if (! Instance | this. instances. indexOf (instance )! =-1) return // if (this. instances. length = 0) {this. showOverlay (instance. overlayColor, instance. overlayOpacity)} this. instances. push (instance) // store the open pop-up box component this. changeOverlayStyle () // control the transparency and color of different pop-up layers // Add z-index const dom = getDOM (instance. $ el) dom. style. zIndex = getZIndex ()}, // close method close (instance) {let index = this in the pop-up box. instances. indexOf (instance) if (index =-1) ret Urn Vue. nextTick () => {this. instances. splice (index, 1) // if (this. instances. length = 0) {this. closeOverlay ()} this. changeOverlayStyle ()}, showOverlay (color, opacity) {let overlay = this. overlay = new Overlay ({el: document. createElement ('P')}) const dom = getDOM (overlay. $ el) dom. style. zIndex = getZIndex () overlay. color = color overlay. opacity = opacity overlay. onClic K = this. handlerOverlayClick. bind (this) overlay. $ appendTo (document. body) // disable Page scrolling this. bodyOverflow = document. body. style. overflow document. body. style. overflow = 'did'}, closeOverlay () {if (! This. overlay) return document. body. style. overflow = this. bodyOverflow let overlay = this. overlay this. overlay = null overlay. $ remove () => {overlay. $ destroy ()}, changeOverlayStyle () {if (! This. overlay | this. instances. length = 0) return const instance = this. instances [this. instances. length-1] this. overlay. color = instance. overlayColor this. overlay. opacity = instance. overlayOpacity}, // The overlayClick () method of the pop-up layer handlerOverlayClick () {if (this. instances. length = 0) return const instance = this. instances [this. instances. length-1] if (instance. overlayClick) {instan Ce. overlayClick () }}window. addEventListener ('keylow', function (event) {if (event. keyCode = 27) {// ESC if (PopupManager. instances. length> 0) {const topInstance = PopupManager. instances [PopupManager. instances. length-1] if (! TopInstance) return if (topInstance. escPress) {topInstance. escPress () }}}) export default PopupManager

Finally, it is encapsulated into a mixin.

Import PopupManager from '. /popup-manager 'export default {props: {show: {type: Boolean, default: false}, // whether the overlay: {type: Boolean, default: true}, overlayOpacity: {type: Number, default: 0.4}, overlayColor: {type: String, default: '#000 '}}, // when the component is mounted, the show value is determined to open the attached () {if (this. show & this. overlay) {PopupManager. open (this) }}, // disable detached () {PopupManager when the component is removed. close (this)}, watch: {show (val) {// modify the show value to call the if (val & this. overlay) {PopupManager. open (this)} else {PopupManager. close (this) }}, beforeDestroy () {PopupManager. close (this )}}

Use

All the code above completes the common logic of all the pop-up layers. You only need to load it as a mixin.

  
  
 
  
  
    
 
  

  Script import Popup from '.. /src 'export default {mixins: [Popup], methods: {// response overlayClick () {this. show = false}, // responds to the esc button event escPress () {this. show = false }}script

Summary

The above are some knowledge points about the vue. js pop-up window component. I hope to help you in your study or work. If you have any questions, please leave a message. Thank you for your support for PHP.