动手吧，vue2自定义全局loading

前行的枫_denglinbo

已于 2022-05-05 16:22:21 修改

阅读量1.4k

点赞数

分类专栏： vue 文章标签： vue.js loading组件

于 2022-05-05 16:20:36 首次发布

本文链接：https://blog.csdn.net/weixin_44708870/article/details/124590817

版权

Vue组件加载动画 CSS动画实例管理自动关闭

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

新建loading.vue, 用来写loading组件

<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>

新建loading.js , 用来构造loading实例，并挂载到body中

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;

//设置自动关闭时长
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;
  }
}

//未关闭则自动关闭
function autoClose() {
  clearTimeout(timer);

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

export default Loading;

这里自动关闭时长可根据请求超时时间来配置；通过Loading.close()主动关闭loading;

将loading方法挂载到Vue原型上

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");