vue 实现全局使用的loading组件（使用Vue.extend）
在开发中，如果项目比较复杂，那么页面加载往往会有一个小空白时间。当然了，页面加载速度这些我们必须要去优化。但若有时候网络不好了什么的，总之免不了会出现白屏。为了不让用户的内心在这段时间内过于寂寞，我们往往需要给页面加上 loading 小圈圈，告诉用户：我们正在努力拽数据呢，亲，稍等哈~~
实现思路
其实，写个loadign页面很简单，关键的是如何让使用起来更简单。
思路一：可能我们一开始最容易想起来的就是，吧loading抽成一个组件，那个页面要用，那个页面引入就好了，然后注册组件，用v-if或者v-show显示隐藏。这没啥毛病，就是感觉麻烦了点，凭什么每个页面都要去引入？这组件用的频率高，列表加载，点击保存，估计我们都会用。
思路二:那既然使用频率高，何不将组件做成全局注册组件？这样就省去了每个组件引用的代码。这比思路一要更进一步了，但是，这样我们就满足了吗？NO! NO! NO! 这不是一个优雅的程序员的风格啊。
假如你和我一样，都不是神马大佬级别人物。如果同样有这种需求，而又一时想不到好办法，咋办？
抄呗。咳咳，说的太直接了点，应该叫借鉴，擅长于从别人的代码里面学习也是一种能力。
使用vue开发的童鞋，相比大部分都使用过element-ui，当然element-ui也有loading组件，你会发现使用时loading，confirm这些组件，都是可以用this访问的，这样调用起来是不是很方便？
点开loading组件源码，我们找到了实现的关键点。其实就是下面这代码
const LoadingConstructor = Vue.extend(loadingVue);
LoadingConstructor.prototype.close = function() {
if (this.fullscreen) {
fullscreenLoading = undefined;
}
afterLeave(this, _ => {
const target = this.fullscreen || this.body
? document.body
: this.target;
removeClass(target, 'el-loading-parent--relative');
removeClass(target, 'el-loading-parent--hidden');
if (this.$el && this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el);
}
this.$destroy();
}, 300);
this.visible = false;
};
其实就是，使用vue.extend创建构造器，然后在构造器下挂函数就好了。
官方对vue.extend解释也很简单：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数
好，这就是我们的思路三了。有了思路，我们就可以实现了，这里我们不需要像elemenet-ui那么复杂，简单点。
剩下的就直接上代码了哈。起个名字吧，叫lm-loading。
lm-loading.vue
<template>
<div class="loadingBox rowCenter" v-if="visible">
<i class="el-icon-loading font32 gray666"></i>
</div>
</template>
<script>
export default {
name: "LmLoading",
}
</script>
入口文件index.js
import Vue from 'vue'
import lmLoading from './lm-loading'
const LmLoadingConstructor=Vue.extend(lmLoading)
let instance
const initInstance = () => {
instance = new LmLoadingConstructor({
el: document.createElement('div'),
data(){
return {
visible: false,
}
}
})
}
const LmLoading=function (){
if (!instance) {
initInstance()
}
}
LmLoading.show=function (timeout){
return new Promise((resolve,reject)=>{
document.body.appendChild(instance.$el)
instance.visible = true
if(typeof timeout==='number'){
let timeNum=setTimeout(()=>{
clearTimeout(timeNum)
instance.visible=false
},timeout)
}
resolve(true)
})
}
LmLoading.hidden=function (){
instance.visible =false
}
export default LmLoading
如此，调用也很简单
在main.js里面引入
import LmLoading from 'lm-loading'
Vue.use(LmLoading)
Vue.prototype.$lmLoading=LmLoading
使用
this.$lmLoading.show()
this.$lmLoading.hidden()
