前言
相信大家肯定都用过 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,
// 就是