current position:Home>Come on, vue2 customize global loading

Come on, vue2 customize global loading

2022-05-15 02:13:58Maple moving forward

newly build loading.vue, Used to write loading Components

<template>
  <div class="loading-mask flex-center-center">
    <svg viewBox="25 25 50 50" class="circular">
      <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
      <circle cx="50" cy="50" r="15" fill="none" class="path"></circle>
      <circle cx="50" cy="50" r="10" fill="none" class="path"></circle>
    </svg>
  </div>
</template>

<style lang="scss">
.flex-center-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  .circular {
    height: 35px;
    width: 35px;
    animation: loading-rotate 2s linear infinite;
    .path {
      animation: loading-dash 1.5s ease-in-out infinite;
      stroke-dasharray: 90, 150;
      stroke-dashoffset: 0;
      stroke-width: 2;
      stroke: #852acf;
      stroke-linecap: round;
      &:nth-of-type(2) {
        stroke-dasharray: 0, 90;
      }
      &:nth-of-type(3) {
        stroke-dasharray: 180, 270;
      }
    }
  }
}

@keyframes loading-rotate {
  100% {
    transform: rotate(1turn);
  }
}

@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 230;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40px;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120px;
  }
}
</style>

newly build loading.js , Used for construction loading example , And mount body in

import Vue from "vue";

import loading from "@/components/loading/loading.vue";

let LoadingConstructor = Vue.extend(loading);

let instance;

let close_status = false;

let timer = null;

// Set the automatic closing time 
const TIME = 8 * 1000;

const Loading = () => {
  close_status = false;

  if (instance) {
    removeChild();
  }

  instance = new LoadingConstructor();

  instance.$mount();

  document.body.appendChild(instance.$el);

  autoClose();

  return instance;
};

Loading.close = function() {
  close_status = true;

  removeChild();
};

function removeChild() {
  if (instance) {
    instance.$el.parentNode.removeChild(instance.$el);
    instance = null;
  }
}

// If it is not closed, it will be closed automatically 
function autoClose() {
  clearTimeout(timer);

  timer = setTimeout(() => {
    if (!close_status) {
      Loading.close();
    }
  }, TIME);
}

export default Loading;

Here, the automatic shutdown duration can be configured according to the request timeout ; adopt Loading.close() Active shut down loading;

take loading Method mount to Vue On the prototype

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Loading from "@/components/loading/loading.js";

Vue.config.productionTip = false;

Vue.prototype.$Loading = Loading;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

effect

copyright notice
author[Maple moving forward],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/132/202205120524479844.html

Random recommended