vue 封装全局的Loading

一、1.在app.vue组件注入loading样式

<template>
<meg-loading
    :tip="centitle"
    :indicator="indicator"
    :spinning="antLoading"
    style="background-color: rgba(0, 0, 0, 0.6)"
  >
  </meg-loading>
  </template>
  <script>
  import { mapState } from "vuex";
  export default {
  name: "MegCubeLayout",
    data() {
	 return {
  		indicator: <meg-icon name="megui-loading2"></meg-icon>,
	 };
  },
  computed: {
    ...mapState("megCube/container", ["antLoading", "centitle"]),
  		},
	  };

二、封装的js文件 globalMethod.js

export const showLoading = function (flag, msg) {
    if (msg) {
      this.$store.state.megCube.container.centitle = msg
    } else {
      this.$store.state.megCube.container.centitle = '加载中...'
    }
    if (flag) {
        this.$store.state.megCube.container.antLoading = flag
    } else {
        this.$store.state.megCube.container.antLoading = false

    }
    
  }

三、在main.js挂载

import { showLoading } from './common/globalMethod'
Vue.prototype.$showLoading = showLoading // 全局loading

四、vue页面调用

触发：	 this.$showLoading(true, '正在上传中')
停止：	 this.$showLoading(false)