vue全局loading：GlobalLoading

一、借助element-ui的loading

效果：

global-loading.js

import Vue from 'vue'
import { Loading } from 'element-ui'

const defaultOptions = { background: 'rgba(0, 0, 0, 0.2)', text: '加载中...' }
let loadingInstance = null

const globalLoading = {
  show(options = {}) {
    loadingInstance = Loading.service({ ...defaultOptions, ...options })
  },
  close() {
    // 以服务的方式调用的 Loading 需要异步关闭
    Vue.prototype.$nextTick(() => {
      loadingInstance?.close()
      loadingInstance = null
    })
  }
}

Vue.prototype.$globalLoading = globalLoading

main.js

import '@/utils/global-loading'

使用：

    async handleTWQH() {
      this.$globalLoading.show()
      const res = await axios.get('http://api.uomg.com/api/rand.qinghua?format=json')
      console.log('res', res.data.content)
      this.$globalLoading.close()
    }

二、自定义loading

效果：

components/Loading/index.vue

<template>
  <div class="loader">
    <div class="loader-inner">
      <div class="loader-line-wrap">
        <div class="loader-line"></div>
      </div>
      <div class="loader-line-wrap">
        <div class="loader-line"></div>
      </div>
      <div class="loader-line-wrap">
        <div class="loader-line"></div>
      </div>
      <div class="loader-line-wrap">
        <div class="loader-line"></div>
      </div>
      <div class="loader-line-wrap">
        <div class="loader-line"></div>
      </div>
    </div>
  </div>
</template>

<style>
.loader {
  background: rgba(0, 0, 0, 0.2);
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 99999;
}
.loader-inner {
  bottom: 0;
  height: 60px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
}
.loader-line-wrap {
  animation: spin 2000ms cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
  box-sizing: border-box;
  height: 50px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  transform-origin: 50% 100%;
  width: 100px;
}
.loader-line {
  border: 4px solid transparent;
  border-radius: 100%;
  box-sizing: border-box;
  height: 100px;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
}
.loader-line-wrap:nth-child(1) {
  animation-delay: -50ms;
}
.loader-line-wrap:nth-child(2) {
  animation-delay: -100ms;
}
.loader-line-wrap:nth-child(3) {
  animation-delay: -150ms;
}
.loader-line-wrap:nth-child(4) {
  animation-delay: -200ms;
}
.loader-line-wrap:nth-child(5) {
  animation-delay: -250ms;
}
.loader-line-wrap:nth-child(1) .loader-line {
  border-color: hsl(0, 80%, 60%);
  height: 90px;
  width: 90px;
  top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {
  border-color: hsl(60, 80%, 60%);
  height: 76px;
  width: 76px;
  top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {
  border-color: hsl(120, 80%, 60%);
  height: 62px;
  width: 62px;
  top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {
  border-color: hsl(180, 80%, 60%);
  height: 48px;
  width: 48px;
  top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {
  border-color: hsl(240, 80%, 60%);
  height: 34px;
  width: 34px;
  top: 35px;
}
@keyframes spin {
  0%,
  15% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

components/Loading/index.js

import Vue from 'vue'
import LoadingUI from './index.vue'

const createLoading = () => {
  const LoadingClass = Vue.extend(LoadingUI)
  const loadingVm = new LoadingClass({ el: document.createElement('div') })
  return {
    show() {
      document.body.appendChild(loadingVm.$mount().$el)
    },
    close() {
      loadingVm.$mount().$el.remove()
    }
  }
}

const loadingInstance = createLoading()

Vue.prototype.$customLoading = loadingInstance

main.js

import '@/components/Loading'

使用：

    async handleTWQH() {
      this.$customLoading.show()
      const res = await axios.get('http://api.uomg.com/api/rand.qinghua?format=json')
      console.log('res', res.data.content)
      this.$customLoading.close()
    }

如果你觉得这篇文章对你有用，可以看看作者封装的库xtt-utils，里面封装了非常实用的js方法。如果你也是vue开发者，那更好了，除了常用的api，还有大量的基于element-ui组件库二次封装的使用方法和自定义指令等，帮你提升开发效率。不定期更新，欢迎交流~