2021/9/18 全局自定义loading

loading.vue

<template>
  <div v-if="show">
    <div class="mask_loading">
      <img src="../assets/img/loading.gif" alt="" class="loading" />
    </div>
  </div>
</template>

<script>
export default {
  name: "loading",
  data() {
    return {};
  },
  props: {
    show: Boolean,
  },
};
</script>
<style scoped>
.loading {
  width: 400px;
  height: 300px;
  position: absolute;
  left: 45%;
  top: 50%;
  margin-left: -50px;
  margin-top: -40px;
  z-index: 13;
}
.mask_loading {
  width: 100%;
  height: 100%;
  background: rgba(7, 6, 6, 0.5);
  position: fixed;
  top: 0;
  z-index: 99999;
}
</style>

loading.js

import Vue from 'vue'
import loadingComponent from '../views/loading.vue'

const LoadingConstructor = Vue.extend(loadingComponent)

const instance = new LoadingConstructor({
    el: document.createElement('div')
})

instance.show = false // 默认隐藏
const loading = {
    show() { // 显示方法
        instance.show = true
        document.body.appendChild(instance.$el)
    },
    hide() { // 隐藏方法
        instance.show = false
    }
}

export default {
    install() {
        if (!Vue.$loading) {
            Vue.$loading = loading
        }
        Vue.mixin({
            created() {
                this.$loading = Vue.$loading
            }
        })
    }
}

main.js

// 引入全局loading
import loading from './js/loading'
// 全局使用loading
Vue.use(loading)

使用：

this.$loading.show(); // 显示loading
this.$loading.hide(); // 隐藏loading