Vue自定义插件

个人学习Vue上的一些总结，重新看了一遍Vue官方 api写了一个loading组件

插件的话其实就是正常vue组件+挂载到原型

#loading-plugins
  position absolute
  top 0
  left 0
  display: flex
  justify-content: center
  align-items: center
  z-index 999
  background: rgba(255,255,255,.5)
  .load-box
    height: 50px
    width: 80px
    display :flex
    justify-content: center
    align-items: center
   .load-circle
      width: 30px
      height: 30px
      border-radius: 50%
      border: 2px solid
      border-color rgba(0,0,0,.8)
      border-left-color transparent
      animation: loading .8s linear infinite
@keyframes loading
  from
    transform: rotate(0deg)
  to
    transform: rotate(360deg)

这里是loading组件的代码可以使用component挂载到你想用的地方，但是如何让它只调用this.$loading.show/hide去控制显示和隐藏呢？

import Loading from '@/components/general/loading'

export default {
  /**
   * 每个插件都有的install方法，用于安装插件
   * @param {Object} Vue - Vue类
   * @param {Object} [pluginOptions] - 插件安装配置
   */
  install (Vue, pluginOptions = {}) {
    // 创建"子类"方便挂载
    const VueLoading = Vue.extend(Loading)
    let loading = null
    function show (obj = undefined) {
      return new Promise((resolve) => {
        if (!loading) {
          let ele = document.querySelector('body')
          if (obj) {
            ele = obj
            obj.style.position = 'relative'
          }
          loading = new VueLoading()
          loading.father = obj
          loading.$mount()
          loading.show(obj)
          ele.appendChild(loading.$el)
          resolve()
        }
      })
    }
    function hide () {
      if (loading) {
        loading.hide()
        loading = null
      }
    }
    let $load = {
      show (obj) {
        show(obj)
      },
      hide () {
        hide()
      }
    }
    Object.assign($load, loading)
    Vue.prototype.$loading = $load //这里把load组件挂载到　Vue原型链上
  }
}

这里是定义的loading.js 根据插件定义的原理在导出的对象里面定义一个install函数（当Vue.use时调用）

到这里只剩下最后一步了：

import VueLoading from '@/components/plugins/loading'
Vue.use(VueLoading)

在main.js使用Vue.use()一下这个组件