Element provides instruction and service are two ways to use its loading components
Just add command mode when using the node v-loading instruction and give it to maintain a state variable, and turn it on and off
Here is the way the service element official website provides call loading component demo
= loadingInstance the let Loading.service (Options); the this . $ nextTick (() => { // as a service invocation requires asynchronous close Loading loadingInstance.close (); });
Obviously, when using the command mode, because the state can be maintained by variables, so us the flexibility to maintain the business logic is implemented by any state function
But the disadvantage is that the same instruction can only bind once on the same node.
While using the service mode, you can instantiate multiple instances of different loading by modifying options, to meet different business needs
But the disadvantage is that when adding multiple services with a non-body node, need to pass target, this time a single case will fail, so if more than one target with a service creation, you need to click Close
How to solve?
- service method
When you create an array, each create a service that will push array, so the flexibility to create multiple services at any time and be able to shut down the specified service
- Command mode
Directly on the code
<div v-show="loading" class="absolute" v-loading="loading" > </div> <style> &.absolute position absolute top 0 bottom 0 left 0 right 0 </style>
This node into the parent node by loading variables to maintain, need to maintain multiple states to insert multiple nodes and creating multiple variables. The two nodes are inserted to maintain the loaded state after completion of the loading status list is empty
The best plus v-show (v-if), since absolute class covering the entire parent, even if the loading disappear, still in the top-level parent, the parent node leading to other nodes in the event such as click, touch event is invalid