自定义loading组件

自定义loading组件   在main.js 引用

// Loading
import './components/loading/index.css';
import Loading from './components/loading/index.js';


 /*
    自定义 loading 组件
    调用
    this.$loading.show('加载中...');  使用方法
    this.$loading.hide();   使用方法
    作者:zhou
*/
 let _LOADING = {
   show: false, // Boolean loading显示状态
   component: null // Object loading组件
 };
 export default {
   install(Vue) {
     /*
         text: String
         type: String
     */
     Vue.prototype.$loading = function (text = '加载中...', type) {
       if (type == 'hide') {
         _LOADING.component.show = _LOADING.show = false;
       } else {
         //防连点
         if (_LOADING.show) {
           return;
         }
         //避免生成新节点
         if (_LOADING.component) {
           _LOADING.component.show = _LOADING.show = true;
           return;
         }
         let LoadingCompoent = Vue.extend({
           data: function () {
             return {
               show: _LOADING.show
             }
           },
           template: `<div v-show="show" class="loading-container">
                                    <div class="loading-img"></div>
                                    <div class="loading-content">${text}</div>         
                            </div>`
         });
         _LOADING.component = new LoadingCompoent();
         let element = _LOADING.component.$mount().$el;
         document.body.appendChild(element);
         _LOADING.component.show = _LOADING.show = true;
       }
     };
     // 打开/关闭
     ['show', 'hide'].forEach(function (type) {
       Vue.prototype.$loading[type] = function (text) {
         return Vue.prototype.$loading(text, type);
       }
     });
   }
 }

.loading-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* width: 100vw;
  height: 100vh; */
  z-index: 9999;
  /* background: #ffffff; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loading-img {
  /* position: fixed; */
  background: url("./img/加载中-大号.png") no-repeat;
  z-index: 3;
  width: 192px;
  height: 192px;
  /* top: 50%;
  left: 50%;
  transform: translate(-50%,-50%); */
  animation: rotate 2s infinite linear;
}

.loading-content {
  font-family: SourceHanSansSC-Regular;
  font-size: 32px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 60px;
  letter-spacing: 0px;
  color: #7485b8;
}


@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(90deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
  }

  75% {
    -webkit-transform: rotate(270deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

 

        this.$loading.show();
         http.getNews(data).then((res) => {
        if (res.code == 200) {
         this.$loading.hide();