Why do YOU need v-loading

When loading an interface, a loading effect is required. Generally, introduce a loading component and run the V-show command to control the display of the loading component. However, this method is a bit tedious. Each new component needs to manually introduce the loading component. Therefore, you can use a custom v-loading command to achieve this effect.

Implementation principle:

  1. Looking at the Vue document, we see the two hook functions in the custom directive: inserted(), update();

  2. They can both be passed to the DOM node where v-loading is located: EL; Binding: controls the property of the V-loading instruction.

  3. First, create a new Vue instance that has a loading component. When loading is required, mount the DOM node on which the instance resides to the corresponding node (EL in point 2). When loading is not required, remove the instance from el.

write

1. Write a loading component: Load.vue

<template>
  <div class="loading">
    <div class="loading-content">
      <img src="~@assets/img/loading/loading.gif" width="50" height="50" />
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data() {
    return{}},methods: {}})</script>

<style scoped lang="scss">
.loading{// Use absolute positioning to center a loading GIF, which requires the parent component to be relativeposition: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%.0);
  .loading-content {
    text-align: center; }}</style>

Copy the code

2. Directive logic for v-loading: directive.ts

import Vue from 'vue'
import Loading from '@components/common/loading/loading'

function append(el: any) {
  el.appendChild(el.instance.$el)
}

function remove(el: any) {
  el.removeChild(el.instance.$el)
}

const loadingDirective = {
  // In this hook function, create a new Vue instance and mount it to a div tag
  inserted(el: any, binding: any) {
    const app = new Vue(Loading)
    const instance = app.$mount(document.createElement('div'))
    // Save the div that the vue instance is mounted to in el (make sure the el does not have the instance attribute, otherwise you need to change the name)
    el.instance = instance
    // If loading is true, add div to parent tag via appendChild method
    if (binding.value) {
      append(el)
    }
  },
  update(el: any, binding: any) {
  // If loading is changed
    if(binding.value ! == binding.oldValue) {// If loading is required, then add/remove the div(vue instance was previously saved on el.instance) via appendChild. Add/remove the vue instance's mount node (div, el.instance.$el)
      if (binding.value) {
        append(el)
      } else {
      // If loading===false, then remove div with removeChild
        remove(el)
      }
    }
  }
}

export default loadingDirective

Copy the code

3. In app. vue, register the V-loading instruction globally

import loadingDirective from '@components/common/loading/directive'. . Vue.directive('loading', loadingDirective)
Copy the code

4. You can use V-loading to control other VUE components.

. <Comp v-loading ="loading"></Comp>
Copy the code