自己写一个vue的loading插件不管是loading插件，还是toast,或者别的根据业务来开发的插件，基本上跑不掉

算是一篇入门总结，借助一个loading的例子，来梳理一下vue的插件

相关API

Vue.use(plugin)安装一个vue插件

Vue.extend(options)创建一个子类构造器

不熟悉这两个插件的可以在官网了解一下，看看一些主要的参数，然后在例子中知道我们要干嘛

step1.思路、知道要做啥

不管是loading插件，还是toast,或者别的根据业务来开发的插件，基本上跑不掉UI，我们首先要知道需要做出什么样的效果，然后确定一个思路入手。

1.写一个最终效果，创建对应的文件夹开发和管理插件

2.整理所需要的API

3.确定需要的参数方法，例如loading时候的标题、控制消失的方法

4.丰富参数来定制化、比如loading的背景色、icon、字体颜色等

简单的确定思路之后，就可以着手开发了

step2. 创建插件模块，全局引入

一般都是plugins文件夹下面会有index.js文件来管理自己开发的插件，然后在main.js引入

import '../plugins'

注意官方文档的一句话该方法【Vue.use()】需要在调用 new Vue() 之前被调用,我们在安装插件的时候，会调用Vue.use方法，所以全局引入我们的插件模块，在创建实例之前会自动查找需要注册的自定义插件。

插件模块的index.js

创建loading模块文件夹

在loading/index.js里面写我们的插件一个install,一个原型挂载方法【就是我们调用的】

可以看到一个文件结构，这样可以在loading插件模块里面打印一下，看看全局引入是否成功，然后index.vue就是我们的样式模版，后面你会知道其实是一个“子类”

这一步主要是三个事情：

1.创建loading模块

2.插件模块通过Vue.use安装自定义插件

3.全局引入插件

step3.写静态loading效果、通过Vue.extend挂载子类

当你发现你的loading插件可以打印出东西之后，我们就确定了关系是确定了，只需要进一步深入发展了，我们先来写一个静态的loading效果，无非就是一个蒙版遮罩层、一个提示文案，长得好看一些的前端会写一个icon转圈圈我们的index.vue文件可以简单的写一个蒙版

但是发现，那边js文件打印的还有，但是蒙版呢！！！！emmmmm？？？

安装子类 qio黑板！！我们要把index.vue,引入我们的js文件，来使用vue基础构造器，并且挂载到我们的实例上才可以，那我们继续往下走, 看看怎么构造和挂载

再刷新页面的话就可以看到一个蒙版了，证明我们的子类添加成功了。【当然，你必须在页面调用this.$loadingself() 才可以】

step3.扩展

一个插件是不可能这么死板的，我们用别人的都是icon可以自定义、标题可以自定义、还有隐藏的控制方法，所以我们也不能太low，就可以根据自己的需要扩展了。

其实，回想起来就是在调用的时候让使用者传入参数来控制，我们根据传参作出相应的判断即可。先假装传入一些参数

// .vue文件里面调用的时候
this.$loadingself('小r正在加载了～', {
    icon: 'el-close',
    success: (res) => {
        ...
    }
})
// 定时器模拟异步
setTimeout(() => {
  this.$loadingself.hide() // 挂载一个hide用来消失
}, 2000)

这段代码估计写习惯的人可以是信手拈来了，但是我们传递进去之后，该怎么处理？我们需要在vue文件中定义好需要的方法和data，然后直接改变或者是通过调用方法传入也是可以的

isShow: false //来控制loading的显示和隐藏

然后在js文件中直接改变即可

这里大家可以打印以下我们通过Vue.extend构造出来的这个子类，会发现我们在vue中定义的方法和data是可以直接访问到的，参数直接就是包含组件选项的对象

最后可以试试点击啊，默认加载各种情况下的loading有没有异常bug，自己有兴趣的话还可以把success的回调，或者给loading加一个渐变动画、或者是加入promise也可以的本文只算是vue的插件的新手入门demo，可以当作一个小知识点