使用两个文件，vue文件是loading加载效果页面，JS文件用于main.js中use，供全局使用

loading.vue<template>    <div v-if="show" class="loading-container">        <div class="loading-mask" />        <div class="loading-content">            <div class="loading-animate" />            <!-- <div class="loading-text">{{ text }}</div> -->        </div>    </div></template><script>    export default {        name: 'Loading',        props: {            show: Boolean        },        data() {            return {                text: 'loading...'            }        }    }</script><style lang="scss" scoped>    .loading-container {        position: relative;        z-index: 9999;    .loading-mask {        position: fixed;        top: 0;        bottom: 0;        left: 0;        right: 0;        background-color: rgba(0, 0, 0, 0.1);    }    .loading-content {        position: fixed;        left: 50%;        top: 45%;        z-index: 300;        transform: translate(-50%, -45%);        text-align: center;    .loading-animate {        display: inline-block;        width: 35px;        height: 35px;        margin: 25px 0 10px;        vertical-align: middle;        animation: cricleLoading 1s steps(12, end) infinite;        background: transparent        url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=')        no-repeat;        background-size: 100%;    }    .loading-text {        font-size: 14px;        font-weight: 600;        color: #808085;    }    }    }    @-webkit-keyframes cricleLoading {        0% {            transform: rotate3d(0, 0, 1, 0deg);        }        100% {            transform: rotate3d(0, 0, 1, 360deg);        }    }    @keyframes cricleLoading {        0% {            transform: rotate3d(0, 0, 1, 0deg);        }        100% {            transform: rotate3d(0, 0, 1, 360deg);        }    }</style>

loading.js

import LoadingComponent from '@/components/Loading/loading.vue'const loading = {install: function(Vue) {// 创建一个Vue的“子类”组件const LoadingConstructor = Vue.extend(LoadingComponent)// 创建一个该子类的实例,并挂载到一个元素上const instance = new LoadingConstructor()// 将这个实例挂载到动态创建的元素上,并将元素添加到全局结构中instance.$mount(document.createElement('div'))document.body.appendChild(instance.$el)// 在Vue的原型链上注册方法，控制组件Vue.prototype.$loading = {show: () => {instance.show = true},hide: () => {instance.show = false}}// 用于window中可以直接使用window.$loading = Vue.prototype.$loading}// show: function () {//   console.log('show')// }}export default loading

import Loading from '@/utils/loading'

Vue.use(Loading)

使用截图如下

this.$loading.show()

const res = await getTxyySum({ page: this.page, pageSize: 50000, selectAddr: this.selectAddr || undefined, beginTime: this.beginTime || undefined, endTime: this.endTime || undefined })

this.$loading.hide()