element-ui 源码解析，你知道 v-loading 是如何实现的吗？

前言

相信大家肯定都用过 element-ui 里面的 v-loading 来写加载，但是如果让你来写一个的话你会怎么写呢？

众所周知，element-ui 框架的 v-loading 有两种使用方式，一种是在需要 loading 的标签上直接使用 :v-loading='true'，这种方式官方称为指令，还有一种就是使用 this.$loading(options) 来调用，这种方式官方称之为服务。

人类对于对于美好的事物总会有趋向性，我也不外乎如此，话不多说（个屁，就你的话最多），直接扒源码。

有些人天生就适合你，有的代码天生就适合阅读，优秀的开源项目都是如此，希望接下来我的解析也可以让你恍然大悟，随后窃笑一声，原来就这样。

正文

使用方式

指令

来回顾一下 v-loading 的指令使用方式

<template>
  <div :v-loading.fullscreen="true">全屏覆盖</div>
</template>
复制代码

服务

再来看看服务的使用方式

mounted() {
  let loading = this.$loading({ fullscreen: true })
  setTimeout(() => { loading.close() }, 1000)
}
复制代码

稍微留点印象，我们简单粗暴一些，直接扒源码吧。

起点

打开你的 node_modules，目标 element-ui，在 src 目录下的 index.js 便是引入所有组件的地方，让我看看今天是哪两个小可爱要被我们扒光光。

// element-ui\src\index.js
// ...
// directive 指令装载
Vue.use(Loading.directive)
// prototype 服务装载
Vue.prototype.$loading = Loading.service
// ...
复制代码

本着循序渐进的原则，我们先从使用较多的指令方式看起。

Vue.use() 这个指令是 Vue 用来安装插件的，如果传入的参数是一个对象，则该对象要提供一个 install 方法，如果是一个函数，则该函数被视为 install 方法，在 install 方法调用时，会将 Vue 作为参数传入。

如果要了解更多有关 plugin，点击这里了解更多有关 plugin 的内容，尤大大的官方文档简直百读不厌。

但是老板！这 Loading 下的两个是啥玩意儿呢！

来，我们看这里。

import directive from './src/directive'
import service from './src/index'

export default {
  // 这里为什么有个 install 呢
  // 当你使用单组件单注册的时候就会调用这里了
  // 效果和下面一样，挂载指令，挂载服务
  install(Vue) {
    Vue.use(directive)
    Vue.prototype.$loading = service
  },
  // 就是上面的 Loading.directive
  directive,
  // 就是