The latest detailed explanation of vue custom loading directive

Preface

Usedelement-uiEveryone should know that there is one in itloadingComponents, there are two ways to call: directives and services. But there is only one loading effect. In order to enrich the loading effect and facilitate use, I wrote a custom oneloadinginstruction.

Create a loading component

First, you need to createloadingComponents, display the required loading effect, vary from person to person, and will not be repeated.

Create a command

Instruction file

First, create ajsFiles are used to write custom instructions, import them in this fileVueandloadingComponents:

import Vue from 'vue'
import loading from './'

Create a constructor

Mainly usedThe constructor can be simply understood as passing in a component as a parameter and then returning the class of the component. This class can be used.newExport an instance.

// The loading component is passed in as a parameterconst loadingConstructor = (loading)

Writing instructions

Before this, set the parameters of the command. In my project, there are two ways to parameter: 1. Pass in a Boolean value to represent whether to enable loading; 2. Pass in an object, which contains attributes such as whether to enable masks, prompt text, and load background color, which is convenient for development and highly customization.laoding。
The triggering of the instruction is mainly inupdateIn this property, this property can receive a function, which will trigger each time the parameter of the instruction changes, which is to determine the loading effect to be turned on or off. The overall code is as follows, with detailed notes:

const loadingDirective = Vue =&gt; {
  ('custLoading', {
    /**
      * binding:
      * 1. A single parameter can be fed to a boolean value;
      * 2. You can also use json to pass multiple parameters { loading, tip, background }
      * 2.1 loading { boolean } Whether to turn on the mask
      * 2.2 tip { string } prompt text
      * 2.3 background { string } Loading background color
      * */
    // update: Triggered when the parameter changes    update: function (el, binding, vnode) {
      const value = 
      let backup = {}
      // Determine the parameter type and convert all parameters into objects to facilitate subsequent unified processing      typeof value === 'boolean' ? ( = value) : (backup = value || {})
      // Take out all parameters      const { loading, tip, background } = backup
      //Judge the opening or closing loading effect based on the loading parameters. The opening and closing functions will be discussed later      loading ? createLoading(el, tip, background) : close(el?.customLoadingInstance?.$el)
    },
    // unbid: triggered when the command is uninstalled    unbind: function (el, binding) {
      const { loading } =  || {}
      // If loading effects are still being displayed, close      loading &amp;&amp; close(el?.customLoadingInstance?.$el)
    }
  })
}
export default loadingDirective

Turn on the function

In the above command, when the parameter turned on istrueWhen acreateLoadingFunctions are used to add loading effects to elements mounted by instructions. The specific ideas are as follows:
1.When calling, we pass in three parameters to it, namely the element with the custom loading instruction, the prompts during loading, and the loading background color. The above command code can be seen in detail.
2.Before execution, it is necessary to determine the current one.VueWhether the instance is running on the server, if so, the loading effect is not needed at this time; or whether the element has already loaded special effects before, if so, there is no need to turn it on once, otherwise there will be multiple loading effects, which is both redundant and confusing to the page.
3.Determine whether the element that needs to use the loading effect still exists or does not exist, then mount it to#mainorsuperior.
4.Determine whether there is positioning or other conditions on the element. In my project, absolute positioning is used to fill the element with the loading effect, so it is necessary to make a judgment. If there is no positioning, add it.relative。
5.useloadingConstructor,createloadingInstance, use the instance as a child element throughappendChild, put it into the element that needs to be displayed, and it can be displayed; at the same time, add an attribute to the element that is displayedcustomLoadingInstance, used to record the currentloadingExamples to facilitate subsequent destruction.
The overall code is as follows:

const createLoading = (target, tip= 'Loading, please wait...', background) =&gt; {
  // Determine whether to enable loading effects  if (.$isServer || target?.customLoadingInstance) return
  const mainEL = ('#main')
  // Determine whether the element displaying the loading effect exists  const parentNode = target || mainEL || 
  // determine whether the parent has positioning, if there is no positioning, add positioning  const position = getComputedStyle(parentNode)?.position
  (!position || position === 'static') &amp;&amp; ( = 'relative')
  // Create a loading instance  const instance = new loadingConstructor({
    el: ('div'),
    data: { background, tip, parentNodeWidth: , isShow: true }
  })
  // Note: The loading instance is a Vue component object, and the real DOM is placed on the $el property of the instance  (instance.$el)
   = instance
  
  return instance
}

Close function

There must be an end if there is an opening parameter.falseWhen , turn off the loading effect. This function receivesloadingExample$el, it's actually loading effectDOMElements, ideas are as follows:
1.In order to make the loading component appear to disappear gradually, the loading effect must not be loaded as soon as possibleDOMElements are deleted, but add a vanishing animation to it, through aclassset up.
2.Set the animation disappear time, byloadingThe internal implementation of the component will complete or fade out of the page within a specified time.This step can also be omitted and removed directly.The reason for adding this effect is to give users a better visual experience.
3.Create a timer to delete the loading effect when the loading effect disappears.DOMelement.Same as 2, it can also be removed directly.

const close = (target) =&gt; {
  if (!target) return
  // Add a gradually disappearing class   += ' custom-loading-disappear'
  // Get loading instance  const instance = target?.parentNode?.customLoadingInstance
  // Set the disappearance time.  instance?.$data?.dur &amp;&amp; (instance.$ = 0.8)
  // Set the timer to delete the DOM element of the loading effect when the loading effect disappears.  let timer = setTimeout(() =&gt; {
    if (target &amp;&amp; ) {
      // Set the customLoadingInstance property to null to avoid interfering with the next startup       = null
      // Remove the DOM element that loads the effect      (target)
    }
    clearTimeout(timer)
    timer = null
  }, 1100)
}

This is the end of this article about vue custom loading directives. For more related vue custom loading directives, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!