Loading load

“This is the third day of my participation in the August More Text Challenge.

  1. Loading Custom instruction

When requesting a background interface in a VUE project, it is common to use loding to transition the load time of data. Since it takes time to request the server interface, adding a Loading logo effect to the request greatly improves the user experience and reduces the pressure on the server.

2.API Vue itself provides a function to register instructions

directive

It contains two parameters: the first is the name of the V-directive, and the second is an object that performs operations on the directive.

An instruction definition object provides the following hook functions (optionally)

Bind, inserted, update, vue custom instructions

  1. Implementation scheme

We’re going to focus on what we do inside objects, but we’ll skip the rest

[Insert] We can use the hook function el, which takes two arguments, EL, which specifies the element to be bound, and binding, which can be used to manipulate the DOM directly. Binding is an object, which contains the following properties: name, value: Oldvalue: The previous value of the instruction binding. That’s all we need.

const loadingDiractive={
    inserted(el,binding){
        console.log(el)
        console.log(binding)
    }
}
Copy the code

So we can see what’s printed out

You can see that the print is the currently bound DOM element.

You can also see the printed values here, because that’s what we’re going to use

We added vue and load.vue components to the current JS file

We will then use extends to create a “subclass” using the base Vue constructor. The parameter is an object that contains component options

Without further ado, let’s get right to the code

import Loading from './loading.vue' console.log(Loading) const loadingDiractive={ inserted(el,binding){ console.log(el);  console.log(binding) const loadingCtor=Vue.extend(Loading) const loadingComp=new loadingCtor().$mount() el.instance=loadingComp if(binding.value){ append(el) } }, update(el,binding){ if(binding.value! =binding.oldValue){ binding.value ? append(el):remove(el) } } } function append(el){ el.appendChild(el.instance.$el) } function remove(el){ el.remove(el.instance.$el) } export default loadingDiractiveCopy the code

See the effect

Rui, thanks