手写一个Vue Loading通过自定义api控制显示与关闭 记录

实现目标调用方法（类似element的loading）：

this.$loading.show() 显示

this.$loading.hide()关闭

应用vue知识点：extend函数，use函数
简单分析，this.$loading的实现通过use使用插件方式把$loading属性绑定到Vue原型
show()和hide()实现通过extend函数生成loading组件对应vue子实例，单独控制属性，并动态把loading组件插入移除body

文件目录：

loading.vue (测试代码样式简单设置)

<template>
  <div class="loading-wrap" v-if="visible">
    <div class="loading-view" >加载中...</div>
  </div>
</template>
<script>
export default {
    name:'loading',
    data(){
      return{
        visible:false
      }
    },

};
</script>
<style lang="css" scoped>
.loading-wrap {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.6);
}
.loading-view {
  color: #333;
  font-size: 18px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
</style>

index.js

import Vue from "vue";
import loading from "./loading";

const vueInstance=Vue.extend(loading);
const childInstance= new vueInstance({
    el:document.createElement('div'),
});



let interval;
const $loading={};

//隐藏
$loading.hide=()=>{
    childInstance.visible=false;
    if(interval) {
        clearInterval(interval);
        interval=null;
    }

    if(childInstance.$el&&childInstance.$el.parentNode==document.body){
 
        document.body.removeChild(childInstance.$el)
    }
}

//显示 time:显示多少时间后自动关闭
$loading.show=(time=2000)=>{
      childInstance.visible=true;
     document.body.appendChild(childInstance.$el);
     interval=setTimeout(() => {
         $loading.hide();
     }, time);
}



export default $loading;

install.js

import loading from './index'

export default{
    install(Vue){
       Vue.prototype.$loading=loading;
    }
}

main.js

import loading from './components/loading/install'
Vue.use(loading);

页面调用

this.$loading.show(3000);//显示（3秒后关闭）

this.$loading.hide()//关闭