preface

You probably all use front-end framework components such as MessaBox or Toast, which can display the global popbox class without having to explicitly write layout code using the location of the component.

this.$message.show(title,content);
Copy the code

Implementation approach

  • To create aLoading.vueFile authoring layout
  • To create aLoading.jsFile and do a few things 👇 below:
    1. useVue.extend()In order toLoading.vueFile fortemplateCreate a new Vue object;
    2. theVueThe object hangs on a newly created DIV tag
    3. willdivTag add tobodyIn the.
    4. useshow()andhide()Method to control the display properties of the componentvisible

code

The Loading. Vue file has a very simple code as follows:

<template> <transition name="loading" > <div class="mask" @touchmove.stop.prevent v-show="visible"> <div class="showContent" > <image src=".. /static/img/loading1.gif" class="loadingImg"></image> <text class="lable">{{label}}</text> </div> </div> </transition> </template> <script> export default { name:'loading', data(){ return{ visible:false } }, props:{ type:{ }, Label :{default:" loading..." , type:String } } } </script> <style> .mask{ position: fixed; top: 0; left: 0; bottom: 0; right: 0; Background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; } .showContent{ width: 160px; height: 160px; display: flex; justify-content: center; align-items: center; padding: 10px; } .loadingImg{ width: 70px; height: 70px; } .lable{ font-size: 28px; color: #ffffff; margin-top: 15px; } /* Opacity */.loading-enter,.loading-leave-active {transition: opacity.3s linear; opacity: 0 ; } </style>Copy the code

What does this Vue file mainly do?

  • Root layout fixed positioning covers the entire interface;

  • Add @touchmove.stop.prevent to the root layout to block events from being passed down

  • Display using visible control components

  • Add a transition effect when components disappear

Load.js code is shown below, and detailed implementation is explained in the comments.

// Import vUE components
import temp from '.. /components/loading'
import Vue from 'vue';
// Create a Vue object
const loading=Vue.extend(temp);
let instance;
export default{
    show(options={}){
        if(! instance) {// Create div tags and mount Vue objects
            instance=new loading({
              el:document.createElement('div')})}if (instance.visible) return;
        instance.label = typeof options === 'string' ? options : options.text || ' ';
        instance.type = options.type || 'nomal';
        // Add the new div to the body
        document.body.appendChild(instance.$el);
        Vue.nextTick((a)= > {
          // Modify the visible property of the component to control showing and hiding
          instance.visible = true;
        });
    },
    hide(){
        if (instance) {
            /* Since loading is usually accompanied by data changes and updates to the interface, it needs to be done in nextTick, i.e. close the loading popover after the data actually drives the interface change */
            Vue.nextTick((a)= > {
              instance.visible = false; }); }}}Copy the code

Using Loading components

improt Loading from "./Loading.js"
Loading.show();
setTimeout((a)= >{
    Loading.hide();
},1000)
Copy the code

You can do this if you want to use it globally in VUE

//main.js
improt Loading from "./Loading.js"
Vue.prototype.$loading=Loading;
// Where it needs to be used
this.$loading.show();
setTimeout((a)= >{
    this.$loading.hide();
},1000)
Copy the code

The final operation effect is as follows: