vue实现Loading

新建一个loading文件件，新增loading.vue跟loading.js两个文件
loaing.vue
loading弹窗组件

<template>
    <div  v-if="show" class="loading-content">
      <div class="loading-animate"></div>
      <div class="loading-text">{{ text }}</div>
    </div>
</template>

声明组件显示的布尔值，还有显示的文字字段，通过default设置默认加载字段

<script>
export default {
  name: 'loading',
  props:{
    show:Boolean,
    text:{
      type:String,
      default:'加载中...'
    }
  },
  data() {
    return {
      
    }
  },
}
</script>

<style lang="scss" scoped>
  .loading-content{
    min-width: 2rem;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 300;
    transform: translate(-50%,-50%);
    text-align: center;
    color:#fff;
    background: rgba(0,0,0,0.7);
    border-radius: 0.08rem;
    overflow: hidden;
    .loading-animate{
      display: inline-block;
      width:0.70rem;
      height:0.70rem;
      margin: 0.25rem 0 0.01rem;
      vertical-align: middle;
      animation: cricleLoading 1s steps(12, end) infinite;
      background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=") no-repeat;
      background-size:100%;
      transform-origin: center;
    }
    .loading-text{
      font-size: 0.24rem;
      color: #fff;
      margin:0 0.24rem 0.24rem 0.24rem;
    }
  }

@keyframes cricleLoading {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

loading.js
引入loading.vue文件,还有vue。
使用extend创建的是一个组件构造器，而不是一个具体的组件实例。然后通过new关键字实例化组件，在通过
Vue的install方法，用于定义vue插件

import Vue from 'vue'
import loading from './loading.vue';
//使用extend创建的是一个组件构造器
const loadingConstructor = Vue.extend(loading);
//实例化组并创建一个div
let instance= new loadingConstructor({
  el:document.createElement('div')
}); 

打印声明的instance变量就可以看到构造器内部的变量

开始编写组件显示的方法和需要显示的文字

const newLoading ={
    show(options) { // 接受传递过来的问题，调用此方法时同事显示弹窗
      instance.show = true;
      //判断是否有传值过来，有就改变默认值
      if(options){
        instance.text=options;
      }
      document.body.appendChild(instance.$el);
    },
    hide() { // 隐藏方法
      instance.show = false
    }
  }

混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。可以参考官方文档，最后将其暴露出去

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

在main.js中引入loading.js，通过Vue.use()注册组件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import loading from '@/components/loading/loading.js';
Vue.config.productionTip = false;
Vue.use(loading)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

在需要的页面中通过this.$loading.show()调用

调用方法

  export default {
        
      created:function(){
        console.log(this.$loading)
        //可以传值，也可以不传值，不传值有默认设置
        this.$loading.show('玩命加载中...');
        this.$axios.get("/api/homeList.json")
          .then(res=>{
              console.log(res);
              setTimeout(() => {
                 this.$loading.hide();
              }, 1000);
          })
        
         
      }
    }